vue router 跳转动画
<template> <div id="app"> <transition :name="SkipSwitchName"> <router-view class="page" /> </transition> </div> </template>
<script> export default { data() { return { SkipSwitchName: "" }; }, watch: { $route(to, from) { if (to.meta.id > from.meta.id) { this.SkipSwitchName = "slide-left"; } else { this.SkipSwitchName = "slide-right"; } } } }; </script>
<style> .page { position: absolute; width: 100%; box-sizing: border-box; background-color: #ededed; } .slide-right-enter-active, .slide-right-leave-active, .slide-left-enter-active, .slide-left-leave-active { will-change: transform; transition: all 250ms; 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); } </style>
路由添加 meta id:
const routes = [ // VueRouter { path: '/', name: 'Login', component: () => import('../views/login'), meta: { id: 1 } }, { path: '/home', name: 'Home', component: () => import('../views/home'), meta: { id: 2 } }, { path: '/transfer', name: 'Tansfer', component: () => import('../views/transfer'), meta: { id: 3 } } ]