Vue 中 transition 组件的类名有哪些？

推荐答案

在 Vue 中，transition 组件会自动为过渡效果添加以下类名：

1. v-enter：进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：进入过渡的激活状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to：进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave：离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：离开过渡的激活状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被移除)，在过渡/动画完成之后移除。

本题详细解读

在 Vue 中，transition 组件用于在元素或组件的插入、更新或移除时应用过渡效果。Vue 会自动为这些过渡效果添加特定的类名，开发者可以通过这些类名来定义 CSS 过渡或动画。

类名的作用

• v-enter 和 v-leave：这两个类名分别定义了进入和离开过渡的初始状态。通常用于设置元素的初始样式，比如透明度为 0 或位置偏移。

• v-enter-active 和 v-leave-active：这两个类名定义了进入和离开过渡的激活状态。通常用于设置过渡的持续时间、延迟和缓动函数。

• v-enter-to 和 v-leave-to：这两个类名定义了进入和离开过渡的结束状态。通常用于设置元素的最终样式，比如透明度为 1 或位置恢复到正常。

自定义类名

如果你希望使用自定义的类名而不是 v- 前缀，可以通过 name 属性来指定前缀。例如：

<transition name="fade">
  <div v-if="show">Hello World</div>
</transition>

在这种情况下，类名将变为 fade-enter、fade-enter-active 等。

示例

<transition name="fade">
  <div v-if="show">Hello World</div>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

在这个示例中，fade-enter-active 和 fade-leave-active 类定义了过渡的持续时间，而 fade-enter 和 fade-leave-to 类定义了元素的初始和最终状态。