为什么 react-transition-group 不起作用？

Question

我正在尝试在状态更改和元素挂载时使用动画，尝试了 React Transition Group 文档中提到的方法但失败了。

我有一个 UI 是这样的：

中心圆项目是活动项目，当用户选择其他项目时会发生变化。

我想要项目变化时的淡入淡出动画效果。

一段代码：

jsx:

   <TransitionGroup>
              {this.state.items.map((data, index) => (
                <CSSTransition key={index} timeout={1000} classNames="item">
                 <div
                   className={"list " + (index === 2 ? " active" : "")}
                   key={index}
                   onClick={() => this.setItems(data)}
                 >
                  <span>{data}</span>
                </div>
             </CSSTransition>
           ))}
       </TransitionGroup>

css:

 .item-enter {
      opacity: 0;
    }
    .item-enter-active {
      opacity: 1;
      transition: opacity 1000ms ease-in;
    }
    .item-exit {
      opacity: 1;
    }
    .item-exit-active {
      opacity: 0;
      transition: opacity 1000ms ease-in;
    }

Answer 1

您似乎只是在重新排序元素。

试试这个 https://popmotion.io/pose/examples/posegroup-reordering/

为什么 react-transition-group 不起作用？

why react-transition-group is not working?

reactjs

react-transition-group