Ruta de aprendizaje básica de Vue 0 (24): ilustra el uso de los efectos de animación de enrutamiento de Vue y los casos detallados (con un proceso detallado de análisis de código de caso y un proceso de iteración de la versión)

1. Efecto de animación de enrutamiento

Animación de ruta =>

El uso de transitioncomponentes, también podemos agregar a la ruta de navegación dongxiao

// 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. Ejemplos

Salto de animación =>

vueMecanismo de animación incorporado, según algunas condiciones =>

v-if, v-show, Componente Root, routerViewdesencadenando

2.1 ejemplo01

routerView De manera similar a los componentes dinámicos, desea producir efectos de animación durante el proceso de cambio de componentes de navegación => deslizar, cambios de transparencia, etc.

Lo cargamos routerView, lo envolvemos afuera y agregamos algunos classestilos de entrada y salida (cambios de transparencia).

\ 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

Descripción de confirmación: a2.26 (animación de enrutamiento de componente de ejemplo01)

etiqueta: a2.26

(Se agregará más tarde)