Vue中如何实现路由切换的简单淡入淡出效果？

本文共计536个文字，预计阅读时间需要3分钟。

路径跳跃的平滑过渡+在开发中需满足高端、大气、上档次的要求。作为前端有责任让您的程序更炫酷。可以在页面切换时加入一些动画效果，提升我们程序的动感。

路由跳转的淡入淡出

在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果，提升我们程序的动效设计

想让路由有过渡动画，需要在<router-view>标签的外部添加<transition>标签，标签还需要一个name属性

<transition name="fade" mode="in-out"> <router-view ></router-view> </transition>

css过渡类名：

组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如name=”fade”,会有如下四个CSS类名：

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

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

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