组件过渡过程中,会有六个CSS类名进行切换,这六个类名与上面transition的name属性有关,比如name="fade",会有如下六个CSS类名:
-
fade-enter:定义进入过渡的开始状态,元素被插入时生效,只应用一帧后立即删除;
-
fade-enter-active:定义过渡的状态,元素被插入时就生效,在过渡过程完成之后移除;
-
fade-enter-to: 定义进入过渡的结束状态。在元素被插入一帧后生效
-
fade-leave:定义离开过渡的开始状态,元素被删除时触发,只应用一帧后立即删除;
-
fade-leave-active:定义离开过渡的状态,元素被删除时生效,离开过渡完成之后被删除;
-
fade-leave-to:定义离开过渡的结束状态。在离开过渡被触发一帧后生效
transition: all 0.5s
&.fade-enter-avtive, &.move-leave-active 定义动画的过程中的透明度
opacity: 1
&.fade-enter, &.move-leave-to 定义动画的开始与动画结束的透明度
opacity: 0
transition一般与v-if v-show一起使用 参考链接