vue-router之實現(xiàn)導(dǎo)航切換過渡動畫效果

更新時間：2019年10月31日 14:30:19 作者：PeriHe

今天小編就為大家分享一篇vue-router之實現(xiàn)導(dǎo)航切換過渡動畫效果，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

過渡動效

提供了transition的封裝組件，添加過渡動畫，通過添加或刪除css類名來實現(xiàn)。

過渡的css類名：

v-enter　　進(jìn)入過渡的開始狀態(tài)

v-enter-active　　進(jìn)入活動狀態(tài)

v-enter-to　　進(jìn)入的結(jié)束狀態(tài)

v-leave　　離開過渡的開始狀態(tài)

v-leave-active　　離開活動狀態(tài)

v-leave-to　　離開結(jié)束狀態(tài)

過渡模式：

in-out　　先進(jìn)后出

out-in　　先出后進(jìn)

用法：

做一個淡隱淡出效果

把想要運(yùn)動的元素放到<transition></transition>里面，設(shè)置模式。

<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啦！

動態(tài)設(shè)置name

再做一個x軸向左和向右滑動進(jìn)入消失效果。

.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標(biāo)簽中用name動態(tài)設(shè)置效果。此時要刪掉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;
 }

要想實現(xiàn)左邊的向左，右邊的向右切換呢

路由元信息

在路由配置中meta可以配置一些數(shù)據(jù)，用在路由對象中。

訪問meta中的數(shù)據(jù)：$route.meta

也就是說，除了提供的路由配置信息，我們還可以通過meta來自定義想要的數(shù)據(jù)。

實現(xiàn)左邊的向左，右邊的向右切換：

step1：給每個組件分別加上index，如果目標(biāo)路由的index大就向右滑動，否則向左。

meta:{
  index:0
  }

0,1,2,3這樣。

step2：監(jiān)控路由信息對象（上一篇文章中講過原因），可以拿到離開的和目標(biāo)的index

watch:{
 $route(to,from){
 console.log(to.meta.index);//目標(biāo)導(dǎo)航下標(biāo)
 console.log(from.meta.index);//離開導(dǎo)航下標(biāo)
 }
}

step3:拿下標(biāo)，比較設(shè)置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之實現(xiàn)導(dǎo)航切換過渡動畫效果就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: