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

php中世界最好的语言
リリース: 2018-03-13 14:46:14
オリジナル
3653 人が閲覧しました

今回は 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 回だけレンダリングされ、前後に切り替えるときに繰り返しレンダリングされなくなります


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

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

推奨読書:

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

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

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート