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 thena second "active" class in order to activate the css animation. Afterthe animation, matching done class names are applied to persist theanimation state.

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

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

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

退出 - 当元素卸载时。

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

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

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

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