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

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

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

過(guò)渡動(dòng)效

提供了transition的封裝組件，添加過(guò)渡動(dòng)畫(huà)，通過(guò)添加或刪除css類(lèi)名來(lái)實(shí)現(xiàn)。

過(guò)渡的css類(lèi)名：

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

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

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

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

v-leave-active　　離開(kāi)活動(dòng)狀態(tài)

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

過(guò)渡模式：

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

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

用法：

做一個(gè)淡隱淡出效果

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

<transition mode="out-in">
 <router-view class="center"></router-view>
</transition>

在style里寫(xiě)動(dòng)效：

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

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

再做一個(gè)x軸向左和向右滑動(dòng)進(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動(dòng)態(tài)設(shè)置效果。此時(shí)要?jiǎng)h掉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;
 }

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

路由元信息

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

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

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

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

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

meta:{
  index:0
  }

0,1,2,3這樣。

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

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

step3:拿下標(biāo)，比較設(shè)置class名稱(chēng)

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之實(shí)現(xiàn)導(dǎo)航切換過(guò)渡動(dòng)畫(huà)效果就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: