Vue移動端アイテムルーティングジャンプ時にオーバーアニメーションを追加

Vue  公式に提供されているアニメはいろいろありますが、参考にしてください.リンク先は以下の通りです.
https://cn.vuejs.org/v2/guide/transitions.html
ここでは、私が使用しているルートを挙げます.ルートを切り替えると、左滑りと右滑りの効果があります.具体的な使用手順は次のとおりです.
1.ルーティングファイルにアニメーション効果が必要なルーティングにindexを追加して左右のスライド効果を区別する

    // router/index.js
    {
      path: "/card-goods-index",
      name: "card-goods-index",
      component: () => import("@/components/card-goods/card-list.vue"),
      meta: {
        title: "    ",
        index: 1
      }
    },
    {
      path: "/card-package-index",
      name: "card-package-index",
      component: () => import("@/components/card-goods/card-package.vue"),
      meta: {
        title: "   ",
        index: 2
      }
    },
    {
      path: "/invalid-card-index",
      name: "invalid-card-index",
      component: () => import("@/components/card-goods/invalid-card.vue"),
      meta: {
        title: "   ",
        index: 3
      }
    },

2.使用   へ コンポーネントのトランジション効果の追加

3.dataでデフォルトのアニメーションスタイルを設定する

//app.vue   
  data() {
    return {
      url: '',
      transitionName: 'slide-left'//    
    };
  },

4.cssでのアニメーション作成

/*app.vue   style*/
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}

.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

5.watchでルーティングを傍受し、ルーティングを切り替えるindexサイズに応じてアニメーションスタイルを設定する

  watch: {
    '$route'(to, from) {
      //      
      console.log(to)
      let toName = to.name

      const toIndex = to.meta.index
      const fromIndex = from.meta.index

      this.transitionName = toIndex < fromIndex ? 'slide-right' : 'slide-left'
    }
  },

 
以上のように、ページを左右にスライドさせるアニメーション効果が実現しました