Vue 0の基本的な学習ルート（24）-Vueルーティングアニメーション効果と詳細なケースの使用に関するグラフィカルで詳細な説明（詳細なケースコード分析プロセスとバージョン反復プロセスを含む）

1.ルーティングアニメーション効果

ルートアニメーション=>

transitionコンポーネントの使用、ルートナビゲーションドンシャオに追加することもできます

// App.vue
<template>
...
<transition name="fade">
  <router-view/>
</transition>
...
</template>
<style>
.fade-enter-active {
     
     
  transition: opacity .5s;
}
.fade-leave-active {
     
     
  transition: none;
}
.fade-enter, .fade-leave-to {
     
     
  opacity: 0;
}
</style>

2.例

アニメーションジャンプ=>

vueいくつかの条件による組み込みのアニメーションメカニズム=>

v-if、v-show、ルートコンポーネント、routerViewトリガー

2.1 example01

routerView 動的コンポーネントと同様に、ナビゲーションコンポーネントの切り替え=>スワイプ、透明度の変更などのプロセス中にアニメーション効果を生成する必要があります。

ロードrouterViewし、外側にラップして、いくつかのインclassスタイルとアウトスタイルを追加します（透明度の変更）。

\ app \ src \ App.vue

<template>
  <div id="app">
    <h1>我的主页</h1>
    <div id="nav">
      <router-link exact to="/">Home</router-link>
      <span> | </span>
      <router-link  to="/about">About</router-link>
      <span> | </span>
      <router-link to="/user">User</router-link>
      <span> | </span>
      <router-link to="/book">小说</router-link>
      <span> | </span>
      <router-link to="/login">Login</router-link>
    </div>
    <hr />
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>

  export default {
     
     
    name: 'App'
  }
</script>

<style>
  .router-link-active {
     
     
    color: red;
  }


  .fade-enter-active {
     
     
    transition: opacity .5s;
  }
  .fade-leave-active {
     
     
    transition: none;
  }
  .fade-enter, .fade-leave-to {
     
     
    opacity: 0;
  }
</style>

優先：https：//
https：//github.com/6xiaoDi/blog-vue-Novice/tree/a2.26ブランチ：branch06

コミットの説明：a2.26（example01-コンポーネントルーティングアニメーション）

タグ：a2.26

（後で追加されます）