今回は 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 はトランジション アニメーションを使用してルート ジャンプ アニメーションを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。