最近做的一个小项目，需要做路由切换，页面滑入滑出的效果，总结下实现的思路和方法。
router-view
用transition标签包裹router-view组件，动态添加动画名，data里定义transitionName变量。
<transition :name="transitionName"><router-view></router-view></transition>
css样式：
.slide-right-enter-active, .slide-right-leave-active, .slide-left-enter-active, .slide-left-leave-active {will-change: transform;transition: all 500ms;position: absolute;}.slide-right-enter {opacity: 0;transform: translate3d(-100%, 0, 0);}.slide-right-leave-active {opacity: 0;transform: translate3d(100%, 0, 0);}.slide-left-enter {opacity: 0;transform: translate3d(100%, 0, 0);}.slide-left-leave-active {opacity: 0;transform: translate3d(-100%, 0, 0);}
watch监听路由的变化
watch: {//使用watch 监听$router的变化$route(to, from) {//如果to索引大于from索引,判断为前进状态,反之则为后退状态console.log(to, "to");console.log(from, "from");if (to.meta.index > from.meta.index) {//设置动画名称this.transitionName = "slide-left";} else {this.transitionName = "slide-right";}},},
页面进出效果meta对象里index索引的定义
const Help = () => import("./Help.vue");export default {path: "/help",name: "help",component: Help,meta: {index: 8,},};const StaffCard = () => import("./StaffCard.vue");export default {path: "/staff-card",name: "staff-card",component: StaffCard,meta: {index: 9,},};
以上，就可以实现页面路由切换的动画效果了。思路就是css写出动画效果，监听路由的变化，如果to索引大于from索引,使用前进的动画,反之使用后退的动画。
1人点赞
学习笔记
