React Transition Group：出现、进入、退出事件和进入、活动完成的类名后缀有什么区别？

Question

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

Answer 1

文档很容易解释它：

CSSTransition 在过渡的出现、进入和退出阶段应用一对类名。应用第一个类，然后应用第二个“活动”类以激活 CSS 动画。动画结束后，应用匹配的完成类名称来持久化动画状态。

所以这些动画触发时出现、进入和退出是不同的情况。

出现- 当您想要在组件首次安装时进行转换时（例如刷新页面时）。

Enter - 当安装新元素时进行转换。

退出- 当元素卸载时。

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

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

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

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