css - React Transition Group : What is the difference between the appear, enter, exit 事件和enter, active done className后缀？

Question

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

Answer 1

文档 explain it很容易:

CSSTransition applies a pair of class names during the appear, enter, and exit stages of the transition. The first class is applied and then a second "active" class in order to activate the css animation. After the animation, matching done class names are applied to persist the animation state.

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

出现 - 当您希望在组件首次挂载时进行转换(例如刷新页面时)。

Enter - 挂载新元素时的过渡。

退出 - 当元素卸载时。

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

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

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

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