1、前言
Vue在插入、更新或者移除DOM时,提供了多种不同方式的应用过渡效果。包括以下工具:
. 在CSS过渡和动画中自动应用class
. 可以配合使用第三方CSS动画库,如:Animate.css
. 在过渡钩子函数中使用JavaScript直接操作DOM
. 配合使用第三方JavaScript动画库,如:Velocity.js
2、过渡或动画的了解
Vue提供了transition的封装组件,来处理过渡以及动画
2.1 使用过渡或动画的场景
在下列情况中,可以给任何元素和组件添加进入/离开过渡
1. 条件渲染(使用v-if)
2. 条件展示(使用v-show)
3. 动态组件
4. 组件的根节点
2.2 使用说明
1. 只有dom从隐藏到显示,或显示到隐藏,才能使用Vue的过渡或动画
2. 动画的元素需要被Vue所提供的组件transition所包裹
3. 在插入或删除transition包裹元素时,Vue会在恰当的时机添加或删除类名
4. 如果过渡的组件提供了JavaScript钩子函数,则Vue会在恰当的时机调用这些钩子函数
5. 如果没有找到JavaScript钩子函数,并且也没有检测到CSS过渡/动画,则会在下一帧中立即执行
3、Vue过渡的使用
3.1 过渡的了解
Vue过渡/动画两个过程,分别为进入和离开,Vue会在不同的需要过渡的元素在进入/离开的不同时机给元素添加不同的类名.
不同阶段的类名:
图示1
图示2
3.2 过渡类名的了解
在进入/离开的过渡中,会有6个class切换.
1. v-enter:定义进入过渡的开始状态,在元素被插入之前生效,在元素被插入之后的下一帧移除。
2. v-enter-active:定义进入过渡生效时的状态,在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除,这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
3. v-enter-to:2.1.8版本以上定义进入过渡的结束状态,在元素被插入之后下一帧生效(与此同时v-enter被移除),在过渡/动画完成之后移除。
4. v-leave:定义离开过渡的开始状态,在离开过渡被触发时立刻生效,下一帧被移除。
5. v-leave-active:定义离开过渡生效时的状态,在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除,这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
6. v-leave-to:2.1.8版本以上定义离开过渡的结束状态,在离开过渡被触发之后下一帧生效(与此同时v-leave被移除),在过渡/动画完成之后移除。
代码
执行结果
3.3 过渡前缀
如果你使用一个没有名字的,则v-是这些类名的默认前缀
如果使用了,那么v-enter会替换为myname-enter.
代码
3.4 在过渡中使用贝塞尔曲线
代码
4、CSS动画
我们处理可以在Vue中使用过渡transition,还可以使用CSS动画animation
代码
执行结果
4.1 自定义过渡动画的类名
我们也可以通过以下attribute来自定义过渡类名:
1. enter-class
2. enter-active-class
3. enter-to-class
4. leave-class
5. leave-active-class
6. leave-to-class
它们的优先级高于普通的类名,这对于Vue的过渡系统和其他第三方CSS动画库,如:animate.css结合使用十分有效。
代码
执行效果
5、动画插件库
animated.css使用的是keyframes的动画
5.1 安装
npm install animate.css --save-dev
5.2 引入