React.JS 中映射元素时的过渡效果

Question

如何在映射元素时获得过渡效果，例如： 基于 http://reactcommunity.org/react-transition-group/css-transition 我想让每个元素贴图的不透明度为 0，并在 1 秒内将不透明度增加到 1。 我创建了如下所示的东西，但是没有出现任何效果。

{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;
}

Answer 1

如果我没理解错的话，你想要对地图产生淡入淡出效果。在我的代码沙箱中，您会找到地图淡入效果的工作示例。

Working Codesandbox

希望这就是您要找的。