一.作用:
在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。
二.图示:
三.写法:
1.准备好样式
- 元素进入的样式:
-
v-enter:进入的起点
-
v-enter-active:进入过程中
-
v-enter-to:进入的终点
-
- 元素离开的样式
-
v-leave:离开的起点
-
v-leave-active:离开过程中
-
v-leave-to:离开的终点
-
2.使用<transition>
包裹要过度的元素,并配置name属性:
3.备注:若有多个元素需要过度,则需要使用:<transition-group>
,且每个元素都要指定key
值。
四.案例及讲解
1.一个元素的动画效果
利用<transition>
标签实现过渡,添加appear
属性可以实现出现时就有动画效果
@keyframes定义动画名
animation调用该动画
2.多个动画效果
多个动画效果需要给<transition>标签添加name属性和修改类名(将v换成指定name)
过渡效果
3.多个元素的动画效果
多个元素使用同一个过渡效果,使用<transition-grounp>标签,每个过渡的元素都要添加独一无二的key
五.动画效果有集成的第三方动画库
安装Animate.css
1.npm iinstall animate.css --save
使用方法:
引入:import 'animate.css'
在transition标签配置name属性为animate__animated animate__bounce,,enter-active-class可在官网复制提供的进入动画名,leave-active-class也可以在官网提供的离开动画名
标签:动画,Vue,封装,name,元素,leave,active,animate From: https://www.cnblogs.com/MDRY/p/16636900.html