Transition 标签
作用
在一个元素或组件进入和离开 DOM 时应用动画
触发条件
组件的进入或离开可以由以下的条件之一触发
- 由
v-if所触发的切换 - 由
v-show所触发的切换 - 由特殊元素
<component>切换的动态组件
当一个 <Transition> 组件中的元素被插入或移除时，会发生下面这些事情：
- Vue 会自动检测目标元素是否应用了 CSS 过渡或动画。如果是，则一些 CSS 过渡 class 会在适当的时机被添加和移除。
- 如果有作为监听器的 JavaScript 钩子，这些钩子函数会在适当时机被调用。
- 如果没有探测到 CSS 过渡或动画、也没有提供 JavaScript 钩子，那么 DOM 的插入、删除操作将在浏览器的下一个动画帧后执行。
触发时机
从上面可以得知，动效的触发条件是组件的进入或离开, 组件进入和组件离开又各自分为 3 个阶段：开始，进行中，结束，vue 会在每个阶段，给<Transition> 组件中的元素，应用不同的 class
Enter: 表示组件的进入
- v-enter-from: 表示组件进入的开始状态
- v-enter-active: 表示组件进入的进行中状态
- v-enter-to: 表示组件进入的结束状态
Leave: 表示组件的离开
- v-leave-from: 表示组件离开的开始状态
- v-leave-active: 表示组件离开的进行中状态
- v-leave-to: 表示组件离开的结束状态
上面的v可以看作是动效的默认命名, 什么意思？
就是指 vue 会在组件进入的开始状态给组件添加v-enter-from的 class, 组件进入的进行中状态给组件添加v-enter-active的 class, 组件进入的结束状态给组件添加v-enter-to的 class, 组件离开也会用同样的规则给组件依次添加v-leave-from, v-leave-active, v-leave-to
如何设置动效的 class
可以通过 Transition 标签的 name 属性修改v的默认命名
html
<Transition name="fade"> ... </Transition>
上面的例子，则 vue 会找如下命名的 class
fade-enter-from
fade-enter-active
fade-enter-to
fade-leave-from
fade-leave-active
fade-leave-to
多 dom 切换之元素间过渡
除了通过 v-if / v-show 切换一个元素，我们也可以通过 v-if / v-else / v-else-if 在几个组件间进行切换，只要确保任一时刻只会有一个元素被渲染即可：
多个按钮交替出现
点击切换状态，不同状态显示不同按钮。
注意：上面的例子，进入和离开的元素都是在同时开始动画的，因此必须将它们设为 position: absolute 以避免二者同时存在时出现的布局问题。
注意：上面的例子，进入和离开的元素都是在同时开始动画的，因此必须将它们设为 position: absolute 以避免二者同时存在时出现的布局问题。
上面的例子，进入和离开的元素都是在同时开始动画的，因此必须将它们设为 position: absolute 以避免二者同时存在时出现的布局问题。
多 dom 切换之过渡模式
使用mode属性设置过渡模式:
- default: 进入动效和离开动效，同时执行
- in-out: 先执行进入动效，再执行俩开动效
- out-in: 先执行离开动效，再执行进入动效
多个按钮交替出现
点击切换状态，不同状态显示不同按钮。
请注意分辨与上一个示例的不同之处
请注意分辨与上一个示例的不同之处
多 dom 切换之component is
多个Vue组件交替出现
实例
淡入
使用Transition标签实现：淡入
注意：仅实现了淡入动效(进入动效), 且只设置了透明度
淡出
使用Transition标签实现：淡出
注意：仅实现了淡出动效(离开动效), 且只设置了透明度
淡如淡出
使用Transition标签实现：淡出
注意：同时设置了进入动效和离开动效