概述
Vue
中可以使用<transition>
和<transition-group>
标签来定义元素的过渡或动画效果
二者最大的区别是,在使用 v-for
循环时,必须使用<transition-group>
标签。其他时候使用<transition>
1.css类名
你可以在CSS
中使用过渡类名来定义,过渡的效果
.v-enter
:过渡开始前的状态.v-enter-active
:开始过渡中的状态,多为定义时间,延迟和速率函数.v-enter-to
:过渡之后的状态.v-leave
:离开之前的状态.v-leave-active
:离开过渡中的状态,多为定义时间,延迟和速率函数.v-leave-to
:离开之后的状态
以上的类名都对<transition>
和<transition-group>
生效
直接在CSS
定义即可
//CSS
.v-enter{}
.v-enter-active{}
.v-enter-to{}
.v-leave{}
.v-leave-active{}
.v-leave-to{}
//HTML
<transition> //使用时直接包裹想要过渡的元素外即可
<li> </li>
</transition>
还可以使用行内 class
进行自定义,直接在行内添加相关class
即可。与animation.css
一起用效果很好
<transition enter-class =""
enter-active-class=""
enter-to-class=""
leave-class=""
leave-active-class=""
leave-to-class="">
<li> </li>
</transition>
2.过渡持续的时间
使用:duration
属性定义过渡持续的时间
//方法一:
<transition :duration="1000">...</transition>
//方法二:
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
与方法一不同的是,方法一
定义了开始和结束的时间,都是1000ms。方法二
分开定义开始和结束的过渡时间。
3.初始渲染
有时我们可能想在一加载页面时,就触发过渡动画。Vue 给我们提供了这个属性实现它
appear
属性设置页面刚刚加载时的过渡效果
与其他过渡一样,它也可以自定义CSS
类名
<transition
appear //只设置此属性时,触发 enter时所定义的效果
//设置下面的属性可以自定义appear效果
appear-class=""
appear-to-class=""
appear-active-class=""
>
<!-- ... -->
</transition>
4.列表过渡
列表循环的元素,也就是带有 v-for
指令的元素实现过渡时,必须要加上-group
,如下
<transition-group tag="ul"> //这里的 tag 属性可以自定义占位的标签
<li v-for="list"></li>
</transition-group>
注意:
<transition-group>
标签内的元素(第一层)必须带有唯一的key
值,若有多个元素,也要提供不同的key
值。若是提供的key
,无法识别元素身份,那么过渡效果将出现问题。CSS
过渡的类将会应用在内部的元素中,而不是这个组/容器本身。
5.v-move(平滑过渡)
在使用
Vue
过渡时,总有些元素会被动的受影响(导致这些元素状态发生变化),而这些元素又没有添加被影响时的过渡效果,所以元素状态改变时的动作会很突兀。
在CSS
中定义 .v-move
类便可以解决这一问题。与其他的过渡类一样,v-move
也可以在<transition-group>
元素中定义move-class=""
。如下:
//情况一:在css中定义
.v-move{
transition: transform .6s;
transition-delay: .3s;
}
//情况二:在元素中定义类名
.hos{
transition: transform .6s;
transition-delay: .3s;
}
<transition-group move-class="hos" tag="ul">
<li v-for="item in list" :key="item.id">
{{ item}}
</li>
</transition-group>
注意:在定义v-move
时,要在 v-leave-active
中定义属性 position: absolute;
,目的是要让在离开运动发生时,将该元素脱离文档流,此时被影响的元素便会触发过渡效果。
本文叙述了最基础的一些 vue 过渡的概念和使用 很喜欢官方文档的一句话:
创建动态过渡的最终方案是组件通过接受 props 来动态修改之前的过渡。一句老话,唯一的限制是你的想象力。