为什么反应过渡组不起作用？

Question

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

我有一个类似这样的用户界面：

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

我想要 item 改变时的 fadeIn 和 fadeOut 动画效果。

创建了代码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/