30_Vue_过渡动画_transition

Vue_过渡动画transition

1、过度动画：
transition：用于单个元素动画
transition-group：用于多个元素并解析为一个标签（默认：span）

2、属性
name：过度类前缀（默认：v）
如设置name=“fs”,过渡类名变成：fs-enter/fs-enter-to/fs-enter-active/fs-leave/fs-leave-to/fs-leave-active
css：boolean,是否使用css过度类（默认：true）。设置为false，将只通过组件事件触发注册的JavaScript钩子。
自定义过渡类名（可配合animate.css框架实现过度效果）
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
4、触发动画场景
Vue会自动检测是否设置css动画或JavaScript钩子，并在下列情形中添加进入/离开过度效果(css过度或JavaScript过度)
条件渲染（使用v-if）
条件展示（使用v-show）
动态组件
组件根节点

5、css过度：
通过css过度类名：组件过度过程中，默认会有四个css类名自动进行切换，会有如下四个css类名：
v-enter:进入过度的开始状态，元素被插入时生效，只应用一帧后立即删除；
v-enter-active：进入过度的结束状态，元素被插入就生效，在过度过程完成之后移除；
v-leave：离开过度的开始状态，元素被删除时触发，只应用一帧后立即删除；
v-leave-active：离开过度的结束状态，元素被删除时生效，离开过度完成之后被删除；

6、案例(显示和隐藏)：