0

How could i get transition effect while mapping elements like: Based on http://reactcommunity.org/react-transition-group/css-transition I would like to have each element map with opacity 0, and within 1s opacity increased to 1. I've created sth like below, however, no effects appeared.

{ask.map((item, index) => {
          return (
            <CSSTransition 
            in={true}
            timeout={500}
            classNames="fade"
            >
            <tr>
              <td>{item.ra}</td>
              <td>{item.ca}</td>
              <td>{(item.ra*item.ca).toFixed(2)}</td>
            </tr>
            </CSSTransition >
            
          )
          })}

CSS:

.fade {
  opacity: 0 ;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 500ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 500ms;
}

1 Answers1

0

If I understood right, you want to have a fade in effect to a map. In my code sandbox you will find a working example of a fade in effect in a map.

Working Codesandbox

Hopefully this is what you are looking for.

jACK
  • 142
  • 1
  • 13
  • Yea, u've helped me a lot :) By the way, do you know how can I get the animations effect when I change local state of mapping items? –  Aug 09 '21 at 09:17
  • I've found the answer here https://stackoverflow.com/questions/63336467/apply-css-animation-to-div-when-array-map-added-or-remove-div-in-react-js –  Aug 09 '21 at 09:56