css - 在 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

如果我理解正确，您希望对地图产生淡入效果。在我的代码沙箱中，您将找到一个地图中淡入效果的工作示例。

工作代码沙盒

希望这是您正在寻找的。