vue-routerのナビゲーション遷移アニメーションの切り替え

前のvue-router編では、小さなdemo、簡単なページアプリケーション、ブログの雛形を作成しました.切り替えがやや硬いことを考慮して,ここでは動効を加えてユーザ体験を向上させる.

トランジション効果

transitionのパッケージコンポーネントを提供し、遷移アニメーションを追加し、cssクラス名を追加または削除することで実現します.
遷移のcssクラス名:
v-enter遷移の開始状態に入る
v-enter-activeアクティブ
v-enter-toが入る終了状態
v-leave移行の開始状態から離れる
v-leave-activeアクティブから離れる
v-leave-to離脱終了状態
遷移モード:
In-out先进后出
out-in先出後進
使用方法:
フェードアウト効果を作成
動きたい要素を中に入れて、モードを設定します.

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

もう1つ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」を削除して自然につなげます.

右に切り替え:

.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により所望のデータをカスタマイズすることもできる.
 
左の左、右の右を切り替えます.
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:マークを外し、class名を比較設定

watch:{
    $route(to,from){
      if(to.meta.index

 
転載先:https://www.cnblogs.com/PeriHe/p/8000561.html