Vue.js はトランジション アニメーションを使用してルート ジャンプ アニメーションを作成します

今回は Vue.js でトランジション アニメーション を使って ルーティング ジャンプ アニメーションを作成する方法についてお届けします Vue.js でトランジション アニメーション を使ってルーティング ジャンプ アニメーションを作成する場合の 注意点 について、実際に見ていきます。ケースを一度見てみましょう。

キープライブ: 切り替えられたビューはキャッシュになります。キープライブが追加されていない場合、毎回再リクエストされるため、より多くのリソースが消費されます

<transition name="fade">
   <keep-alive>
      <router-view></router-view>
   </keep-alive></transition>

注:

ナビゲーションを切り替えると、現在のリンクタグのクラスには class="router-link-active" が割り当てられます。これは非常に便利な操作です

スタイルを変更するには、router-link に active-class="active" を追加します

<ul>
    <router-link v-for="item in products" :to="{ path: item.path }" tag="li" active-class="active">
     {{ item.name }}    </router-link></ul>css部分
选种和hover时,显示蓝色
.product-board li.active,
.product-board li:hover {
  background: #4fc08d;
  color: #fff;
}
......

。 router-view の -alive 属性により、ビューが 1 回だけレンダリングされ、前後に切り替えるときに繰り返しレンダリングされなくなります

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue.jsルーティングのその他の操作

Vue.jsのネストされたルーティング(サブルーティング)

Vue.jsのカスタムディレクティブディレクティブ

以上がVue.js はトランジション アニメーションを使用してルート ジャンプ アニメーションを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。