vue transition注意事项

使用vue transition时的注意事项

  1. 单个元素时使用<transition></transition>标签,多个元素时使用<transition-group></transition-group>标签,使用<transition-group></transition-group>标签时必须为每一个元素添加key。

  2. transition就是过渡的意思,transition组件就是用于元素从一个状态到另外一个状态的过渡效果

  3. transition组件会在特定的阶段为包裹住的元素添加class,通过在特定的class上设定不同的状态完成过渡效果。下面是过渡时六个class被添加的时间
    .v-enter:元素的初始状态(过渡从开始到结束嘛,v-enter就是过渡还未开始的状态)
    .v-enter-to:过渡完成后的状态,在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
    v-enter-activev-leave-active:定义进入过渡生效时的状态。即在这设置两个状态间的变化效果和变化时间。也可以运用关键帧技术
    v-leave:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
    v-leave-to:离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

  4. transition最麻烦的就是设置上面六个class的状态效果了,如果你做的过渡效果死活不起效或者行为怪异,那八成就是各个状态的class的设置问题了。着重检查

  5. name属性修改的是class的名字,默认是v,即如果你没改name属性,添加的class是v-enter,如果设置name=“fade”,则添加的class就是.fade-enter

参考文档:https://cn.vuejs.org/v2/guide/transitions.html

上一篇:Vue使用过渡类名实现动画


下一篇:枚举算法——①基础