在 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

希望这是您正在寻找的。​​p>