Vue 过渡动画 Transition
学习用Transition和TransitionGroup给元素添加进入/离开动画 · 难度：进阶 · +20XP
Transition 组件
Vue提供了内置的 <Transition> 组件，给元素的进入和离开添加动画效果，不需要任何第三方库。
基本用法
<button @click="show = !show">切换</button>
<Transition name="fade">
<p v-if="show">Hello!</p>
</Transition>
/* 对应的CSS */
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
opacity: 0; /* 进入前透明，离开后透明 */
}六个CSS类名
| 类名 | 时机 |
|---|---|
name-enter-from | 进入开始状态 |
name-enter-active | 进入过渡中（在这里设置transition） |
name-enter-to | 进入结束状态 |
name-leave-from | 离开开始状态 |
name-leave-active | 离开过渡中 |
name-leave-to | 离开结束状态 |
TransitionGroup — 列表动画
用于 v-for 列表的添加/删除动画。额外支持 name-move 类——当其他元素移动位置时的平滑过渡。
动手试试
右边演示淡入淡出效果。点按钮切换显示看动画。