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

Posted 2023-03-06

【中文标题】React Transition Group：出现、进入、退出事件和进入、活动完成类名后缀有啥区别？

【英文标题】：React Transition Group: What is the difference between the appear, enter, exit events and the enter, active done className suffixes?React Transition Group：出现、进入、退出事件和进入、活动完成类名后缀有什么区别？

【发布时间】：2018-10-22 12:05:53

【问题描述】：

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

【参考方案1】：

文档explain it 很容易：

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;

【讨论】：

你有一个有效的例子吗？在我的项目中，某些后缀从未应用过，例如 -exit-done