使用vue transition时的注意事项
-
单个元素时使用
<transition></transition>
标签,多个元素时使用<transition-group></transition-group>
标签,使用<transition-group></transition-group>
标签时必须为每一个元素添加key。 -
transition就是过渡的意思,transition组件就是用于元素从一个状态到另外一个状态的过渡效果
-
transition组件会在特定的阶段为包裹住的元素添加class,通过在特定的class上设定不同的状态完成过渡效果。下面是过渡时六个class被添加的时间
.v-enter
:元素的初始状态(过渡从开始到结束嘛,v-enter就是过渡还未开始的状态).v-enter-to
:过渡完成后的状态,在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。v-enter-active
和v-leave-active
:定义进入过渡生效时的状态。即在这设置两个状态间的变化效果和变化时间。也可以运用关键帧技术v-leave
:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。v-leave-to
:离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。 -
transition最麻烦的就是设置上面六个class的状态效果了,如果你做的过渡效果死活不起效或者行为怪异,那八成就是各个状态的class的设置问题了。着重检查
-
name属性修改的是class的名字,默认是v,即如果你没改name属性,添加的class是v-enter,如果设置name=“fade”,则添加的class就是.fade-enter
参考文档:https://cn.vuejs.org/v2/guide/transitions.html