最近做的一个小项目,需要做路由切换,页面滑入滑出的效果,总结下实现的思路和方法。
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人点赞
学习笔记