vue-routerのナビゲーション切り替えのアニメーション効果を実現します。

過渡的効果
トランスアニメーションを追加または削除することにより、トランスミッションのパッケージコンポーネントを提供します。
遷移のcssクラス名:
v-enterは遷移の開始状態に入ります。
v-enter-activeが活動状態に入ります。
v-enter-toが入る終了状態
v-leave移行の開始状態から離れる
v-leave-activeが活動状態から離れます。
v-leave-to退出終了状態
移行モード:
n-outは進んで出ます。
out-inは先に後進を出ます。
使い方:
淡い効果を出す
運動したい要素をに入れて、モードを設定します。

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

スタイルにアクションを書く:

.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;
}

transionタグに効果を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のデータにアクセスします。
つまり、ルーティングの設定情報を提供する以外に、欲しいデータをmetaでカスタマイズすることもできます。
左の左、右の右に切り替えます。
step 1：各コンポーネントにindexをそれぞれ加え、ターゲットルートのindexが大きいと右にスライドします。そうでないと左にスライドします。

meta:{
  index:0
  }

0,1,2,3です。
Step 2：ルート情報の対象を監視します。（前の記事で原因を説明しました。）離れたものと目標のindexがもらえます。

watch:{
 $route(to,from){
 console.log(to.meta.index);//      
 console.log(from.meta.index);//      
 }
}

Step 3：下付きで、クラス名を比較設定します。

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がナビゲーションの切り替えを実現しました。アニメーション効果は小編集が皆さんに提供した内容の全部です。参考にしていただければと思います。よろしくお願いします。