Vue3 realiza la transición de la animación de la página de cambio de enrutamiento

En este ejercicio, al usar vue3+vue-router4 para realizar la animación de la página de cambio de enrutamiento, pensé que podría hacerse directamente usando la transición, pero no esperaba que hubiera problemas constantes en el proceso. resumir los problemas que ocurrieron.

//我以为能实现效果的代码
<template>
  <div class="app">
    <router-link to="/about">about</router-link>
    <router-link to="/home">home</router-link>
    <div class="content">
      <transition name="fade">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
a {
    
    
  padding: 20px;
}
.fade-enter-from,
.fade-leave-to {
    
    
  /*定义进入开始和离开结束的透明度为0*/
  opacity: 0;
}
.fade-leave-to {
    
    
  transform: translateX(20px);
}
.fade-enter-to {
    
    
  transform: translateX(-20px);
}
.fade-enter-to,
.fade-leave-from {
    
    
  /*定义进入结束和离开开始的透明度为1*/
  opacity: 1;
}
.fade-leave-active,.fade-enter-active {
    
    
  transition: all 0.5s ease-out;
}
</style>

efecto realista

Problema 1: la animación de salir cuando se cambia de página no es válida, solo la animación de entrar

Motivo : al cambiar de ruta, desde el punto de vista de la estructura DOM, el nodo DOM se elimina en un instante y el efecto de abandono no se puede realizar.<keep-alive></keep-alive>

<template>
  <div class="app">
    <router-link to="/about">about</router-link>
    <router-link to="/home">home</router-link>
    <div class="content">
      <transition name="fade">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </div>
  </div>
</template>

Pregunta 2: agregado como se indicó anteriormente <keep-alive></keep-alive>, todavía no funciona y se informa una advertencia amarilla

Nota de advertencia: la transición y el mantenimiento de conexión ahora deben usarse dentro de RouterView a través de la API v-slot
Descripción oficial del documento: https://router.vuejs.org/zh/guide/migration/index.html#router-view-%E3 % 80%81-keep-alive-%E5%92%8C-transition
se modifica de la siguiente manera

<template>
  <div class="app">
    <router-link to="/about">about</router-link>
    <router-link to="/home">home</router-link>
    <div class="content">
      <router-view v-slot="{ Component }">
        <transition name="fade">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
    </div>
  </div>
</template>

Efecto

Pregunta 3: antes de que finalice la animación de salir de una página, aparece la página que se cambiará

El elemento tiene un atributo de modo, que se utiliza para establecer el efecto de transición de la animación.

• El valor predeterminado es realizar tanto la entrada como la salida de elementos al mismo tiempo. El elemento está absolutamente posicionado posición: absoluta; No habrá desalineación.
• Entrada-salida, el nuevo elemento entra primero y el elemento actual sale después de la finalización.
• out-in, el elemento actual sale primero y el nuevo elemento entra después de completarse.
  Para obtener más información, consulte: https://cn.vuejs.org/api/built-in-components.html#transition

<template>
 <div class="app">
   <router-link to="/about">about</router-link>
   <router-link to="/home">home</router-link>
   <div class="content">
     <router-view v-slot="{ Component }">
       <transition name="fade" mode="out-in">
         <keep-alive>
           <component :is="Component" />
         </keep-alive>
       </transition>
     </router-view>
   </div>
 </div>
</template>

Efecto

Enlace de referencia: https://www.wubin.work/blog/articles/16