使用vue-router切換頁面時實現(xiàn)設(shè)置過渡動畫
背景
今天在編寫頁面時,看到頁面沒有任何效果就只是直入直出,完全沒有一點逼格,所以想要實現(xiàn)類似于原生app的那種切換頁面時的特效,遂開始google,發(fā)現(xiàn)網(wǎng)上各種方案都是各有優(yōu)缺點,于是整理了自認為優(yōu)雅的方案并記錄下來.
實現(xiàn)難點
如何判斷切換路由時是前進還是后退
每次切換時向左向右切換動畫如何實現(xiàn)
解決方案
我們需要給各個頁面定義層級,在切換路由時判斷用戶是進入哪一層頁面,如果用戶進入更高層級那么做前進動畫,如果用戶退到低層級那么做后退動畫.
router/index.js
import VueRouter from 'vue-router' import Home from '../components/home/home' import User from '../components/user/user' var router = new VueRouter({ routes:[{ name:'test', path:'/', meta:{index:0},//meta對象的index用來定義當前路由的層級,由小到大,由低到高 component:{ template:'<div>test</div>' } },{ name:'home', path:'/home', meta:{index:1}, component:Home },{ name:'user', path:'/user/:id', meta:{index:2}, component:User }] });
監(jiān)控路由跳轉(zhuǎn),判斷切換頁面之間的層級關(guān)系,并以此來判斷路由前進或者后退.
<template> <div id="app"> <transition :name="transitionName"> <router-view></router-view> </transition> </div> </template> <script> export default { name: 'App', data(){ return { transitionName:'' } }, watch: {//使用watch 監(jiān)聽$router的變化 $route(to, from) { //如果to索引大于from索引,判斷為前進狀態(tài),反之則為后退狀態(tài) if(to.meta.index > from.meta.index){ //設(shè)置動畫名稱 this.transitionName = 'slide-left'; }else{ this.transitionName = 'slide-right'; } } } } </script>
編寫slide-left 和 slide-right 類的動畫
.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); }
示例
CSDN markdown 禁用了iframe, 有翻墻工具的可以點擊codesandbox demo.
以上這篇使用vue-router切換頁面時實現(xiàn)設(shè)置過渡動畫就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
淺談vue獲得后臺數(shù)據(jù)無法顯示到table上面的坑
這篇文章主要介紹了淺談vue獲得后臺數(shù)據(jù)無法顯示到table上面的坑,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08VUE2.0 ElementUI2.0表格el-table自適應高度的實現(xiàn)方法
在開發(fā)中,需要表格控件根據(jù)瀏覽器高度進行調(diào)整,固定表頭,本文主要介紹了VUE2.0 ElementUI2.0表格el-table自適應高度的實現(xiàn)方法,非常具有實用價值,需要的朋友可以參考下2018-11-11深入淺析Vue.js中 computed和methods不同機制
這篇文章給大家介紹了Vue.js中 computed和methods不同機制,在vue.js中,methods和computed兩種方式來動態(tài)當作方法使用,文中還給大家提到了computed和methods的區(qū)別,感興趣的朋友一起看看吧2018-03-03