溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
過渡動效
提供了transition的封裝組件，添加過渡動畫，通過添加或刪除css類名來實現。
過渡的css類名：
v-enter 進入過渡的開始狀態
v-enter-active 進入活動狀態
v-enter-to 進入的結束狀態
v-leave 離開過渡的開始狀態
v-leave-active 離開活動狀態
v-leave-to 離開結束狀態
過渡模式：
in-out 先進后出
out-in 先出后進
用法：
做一個淡隱淡出效果
把想要運動的元素放到<transition></transition>里面，設置模式。
<transition mode="out-in"> <router-view class="center"></router-view> </transition>
在style里寫動效：
.v-enter{
opacity: 0;
}
.v-enter-active{
transition: 0.5s;
}
.v-enter-to{
opacity: 1;
}
.v-leave{
opacity: 1;
}
.v-leave-to{
opacity:0;
}
.v-leave-active{
transition: 0.5s;
}
就ok啦！
動態設置name
再做一個x軸向左和向右滑動進入消失效果。
.left-enter{
transform:translateX(100%);
}
.left-enter-to{
transform:translateX(0);
}
.left-enter-active{
transition: 1s;
}
.left-leave{
transform:translateX(0);
}
.left-leave-to{
transform:translateX(-100%);
}
.left-leave-active{
transition: 1s;
}
在transition標簽中用name動態設置效果。此時要刪掉mode="out-in"能自然銜接。
<transition name="left"> <!--<router-view name="slider"></router-view>--> <router-view class="center"></router-view> </transition>
向右切換：
.right-enter{
transform:translateX(-100%);
}
.right-enter-active{
transition: 1s;
}
.right-leave-to{
transform:translateX(100%);
}
.right-leave-active{
transition: 1s;
}
要想實現左邊的向左，右邊的向右切換呢
路由元信息
在路由配置中meta可以配置一些數據，用在路由對象中。
訪問meta中的數據：$route.meta
也就是說，除了提供的路由配置信息，我們還可以通過meta來自定義想要的數據。
實現左邊的向左，右邊的向右切換：
step1：給每個組件分別加上index，如果目標路由的index大就向右滑動，否則向左。
meta:{
index:0
}
0,1,2,3這樣。
step2：監控路由信息對象（上一篇文章中講過原因），可以拿到離開的和目標的index
watch:{
$route(to,from){
console.log(to.meta.index);//目標導航下標
console.log(from.meta.index);//離開導航下標
}
}
step3:拿下標，比較設置class名稱
watch:{
$route(to,from){
if(to.meta.index<from.meta.index){
this.names="right"
}else{
this.names="left"
}
}
},
data(){
return{
index:'/home',
names:'left'
}
}
以上這篇vue-router之實現導航切換過渡動畫效果就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
