为什么react-transition-group无法正常工作？

Question

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

我的UI如下所示：

中心圆圈项目是活动项目，当用户选择其他项目时会更改。

当项目更改时，我希望淡入和淡出动画效果。

创建了示例代码codesandbox link

一段代码：

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/