Vuejs路由过分动画

须要在App.vue文件里添加<transition>标签,并给标签起一个名字叫fade。vue

CSS 过分类名:it

组件过分过程当中,会有四个CSS类名进行切换,这四个类名与transition的name属性有关,好比name='fade',io

会有以下四个CSS类名:transition

一、fade-enter进入过分的开始状态,元素被插入式生效,只应用一帧后马上删除。文件

二、fade-enter-active进入过分的结束状态,元素被插入时就生效,在过分过程完成后移除。标签

三、fade-leave离开过分的开始状态,元素被删除时触发,只应用一帧后马上删除

四、fade-leave-active离开过分的结束状态,元素被删除时生效,离开过分完成后被删除

从上面四个类名能够看出,fade-enter-active和fade-leave-active在整个进入或离开过程当中都有效,

因此CSS的transition属性在这两个类下进行设置

相关文章
相关标签/搜索