Cómo agregar animación al cambio de ruta en vue
Vue proporciona un componente contenedor para "transición" que puede agregar transiciones de entrada/salida a cualquier elemento y componente en los siguientes escenarios
Representación condicional (usando "v-if")
Visualización condicional (usando "v-show")
Componentes dinámicos
Visualización condicional (usando "v-showv-if")
Visualización condicional (usando ?v-show)
Componentes dinámicos
Nodo raíz del componente
El siguiente es un ejemplo típico:
lt;div id="demo"gt;
lt;botón v-on: click="mostrar = ! show"gt;
Alternar
lt;/buttongt;
lt; nombre de transición="fade"gt;
lt; p v-if="show"gt; hola;/pgt;
lt;/transitiongt;
lt;/divgt;
nuevo Vue({
el: '#demo',
datos: {
show: true
}
} )
.fade-enter-active, .fade-leave-active {
transición: opacidad .5s
}
. fade-enter, .fade-leave-to /* .fade-leave-active en la siguiente versión 2.1.8 */ {
opacidad: 0
}
}
}
Toggle.p>
Toggle
hola
Insertar o eliminar transición Cuándo un elemento está contenido en un componente, Vue hará lo siguiente:
Detectar automáticamente si el elemento de destino tiene transiciones CSS o animaciones aplicadas y, de ser así, agregar/eliminar nombres de clases CSS según corresponda.
Si el componente de transición proporciona funciones de enlace de JavaScript, estas funciones de enlace se llamarán en el momento adecuado.
Si no se encuentra ningún enlace de JavaScript y no se detecta ninguna transición/animación CSS, se llamará. la próxima vez realice operaciones DOM (inserción/eliminación) inmediatamente en el marco (Nota: esto se refiere al mecanismo de animación cuadro por cuadro del navegador, que es diferente del concepto "nextTick" de Vue)
Clase de transición. nombre
Hay 6 cambios de clase en la transición de entrada/salida
v-enter: define el estado inicial de la transición de entrada y se elimina en el siguiente cuadro >
. v-enter-active: define el estado de entrada de la transición. Tendrá efecto durante toda la transición del elemento, tendrá efecto cuando se inserte el elemento y se eliminará después de que se complete la transición/animación. para definir las funciones de duración, retardo y curva
v-enter-to: ?2.1.8 y superiores Define el estado final de la transición de entrada que entra en vigor un cuadro después de que el elemento. insertado (esto eliminará "v-enter") y eliminado después de que se complete la transición/animación.
v-leave: define el estado inicial de la transición de salida. Tiene efecto cuando se activa la transición de salida y se elimina en el siguiente fotograma.
v-leave-active: Define el estado de transición.
Actúa sobre el elemento durante toda la transición, entra en vigor tan pronto como se activa la transición de salida y se elimina una vez que se completa la transición/animación. Esta clase se puede utilizar para definir la duración de la transición, el retraso y las funciones de curva.
v-leave-to: ?2.1.8 y superior? Define el estado final de la transición de salida. Tiene efecto un fotograma después de que se activa la transición de salida (en cuyo punto se eliminará "v-leave") y se elimina después de que se completa la transición/animación.