vue transition 路由过渡效果

按照vue的官网应用到自己的项目上总是不成功。但是我刷新后效果出现了。
究其原因,transition 的过度样式只有在组件删除,插入时有效,因此需要用到v-if,当路由变化时,将组件删除,再插入即可
组件过渡过程中,会有六个CSS类名进行切换,这六个类名与上面transition的name属性有关,比如name=”slide-left”,会有如下六个CSS类名:

slide-left-enter:定义进入过渡的开始状态,元素被插入时生效,只应用一帧后立即删除;

slide-left-enter-active:定义过渡的状态,元素被插入时就生效,在过渡过程完成之后移除;

slide-left-enter-to: 定义进入过渡的结束状态。在元素被插入一帧后生效

slide-left-leave:定义离开过渡的开始状态,元素被删除时触发,只应用一帧后立即删除;

slide-left-leave-active:定义离开过渡的状态,元素被删除时生效,离开过渡完成之后被删除;

slide-left-leave-to:定义离开过渡的结束状态。在离开过渡被触发一帧后生效

猜你喜欢

转载自blog.csdn.net/zfz5720/article/details/81531509