第十课 vue过渡动画

把要过渡动画的元素,包裹在transition标签中,设置一个name属性,组件过渡过程中,会有四个css类名切换,这个类名与transition的name有关,如下:

1.fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立刻删除

2.fade-enter-active:进入过渡的结束状态,元素被插入时生效,在过渡过程完成后移除

3.fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立刻删除

4.fade-leave-active:开始过渡的结束状态,元素被删除时失效,离开过渡完成后被删除

第十课 vue过渡动画_第1张图片


第十课 vue过渡动画_第2张图片

你可能感兴趣的:(第十课 vue过渡动画)