一、效果圖 二、思路 1. 定義兩個 CSS 過度動畫,前進與後退: slide-right-enter 和 slide-left-enter 2. 給路由配置meta信息,設置各個路由的級別: index 3. 監控路由跳轉,比對 meta 信息級別,如果從大跳轉到小說明是返回,從小跳轉到大則是前 ...
一、效果圖
二、思路
1. 定義兩個 CSS 過度動畫,前進與後退: slide-right-enter 和 slide-left-enter
2. 給路由配置meta信息,設置各個路由的級別: index
3. 監控路由跳轉,比對 meta 信息級別,如果從大跳轉到小說明是返回,從小跳轉到大則是前進
三、具體代碼
APP.vue
<template> <div id="app"> <transition :name="transitionName"> <router-view/> </transition> </div> </template> <script> export default { name: 'app', data () { return { transitionName: '' } }, watch: { $route (to, from) { if (to.meta.index > from.meta.index) { this.transitionName = 'slide-left' } else { this.transitionName = 'slide-right' } } } } </script> <style lang="scss"> #app { color: #2c3e50; } //轉場動畫 .slide-right-enter-active, .slide-right-leave-active, .slide-left-enter-active, .slide-left-leave-active { // 啟用硬體加速 will-change: transform; transition: all 300ms; position: fixed; } .slide-right-enter { transform: translate(-100%, 0); transition-timing-function: ease-in; } .slide-left-enter { transform: translate(100%, 0); transition-timing-function: ease-in; } </style>
router.js
import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' Vue.use(Router) export default new Router({ // mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home, meta: { index: 1 } }, { path: '/publish', name: 'publish', component: () => import('./views/Publish.vue'), meta: { index: 2 } }, { path: '/personal', name: 'personal', component: () => import('./views/Personal.vue'), meta: { index: 2 } } ] })