React Transition Group：出现，输入，退出事件和输入，活动完成的className后缀之间有什么区别？

Question

为什么会有这么多变化？我记录了我的开发人员工具的元素选项卡，只显示“-enter-done”和“-exit”类正在应用于动画元素。

Answer 1

文档explain it非常容易：

  

CSSTransition在出现期间应用一对类名，输入，   并退出过渡阶段。然后应用第一个类   第二个＆＃34;活跃＆＃34; class为了激活css动画。后   动画，匹配完成的类名称被应用于持久化   动画状态。

因此，当触发这些动画时，进入和退出不同的情况。出现 - 当你想要在组件第一次安装时进行转换时（比如刷新页面时），输入 - 在安装新元素时进行转换，退出 - 当元素卸载时。

后缀的作用是允许您在动画的每个步骤设置不同的CSS属性。

.my-animation-enter {
  opacity: 0;
  transition: opacity 1s ease;
}

.my-animation-enter-active {
  opacity: 1;
}

.my-animation-enter-done {
  cursor: pointer;
}