为什么react-transition-group不工作？

Question

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

我有一个类似下面这样的UI：

​

中心圆项目是活动项目，并在用户选择其他项目时更改。

我希望当项目更改时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/