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
Branch： branch06

commit description：a2.26（example01——组件路由动画）

tag：a2.26

（后续待补充）