Uso de etiquetas de transición de animación vue3
v-enter-to: Define el estado final de la transición. Tiene efecto en el siguiente fotograma después de insertar el elemento (mientras se elimina v-enter-from) y se elimina una vez completada la transición/animación.
v-enter-active: Define el estado en el que la transición de entrada surte efecto. Se aplica a toda la transición de entrada, entra en vigor antes de que se inserte el elemento y se elimina después de que se completa la transición/animación. Esta clase se puede utilizar para definir tiempos de proceso, retrasos y funciones de curva para transiciones de entrada.
v-leave-from: Define el estado inicial de la transición de salida. Tiene efecto inmediatamente cuando se activa la transición de salida y se elimina en el siguiente fotograma.
v-leave-to: Define el estado final de la transición de salida. Tiene efecto en el siguiente fotograma después de que se activa la transición de salida (también elimina v-leave-from) y se elimina después de que se completa la transición/animación.
v-leave-active: Define el estado en el que la transición de salida está activa. Se aplica durante toda la fase de transición de salida, entra en vigor inmediatamente cuando 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 tiempos de proceso, retrasos y funciones de curva para transiciones de salida.
Uso:
.fade-enter-from,.fade-leave-to {
opacidad:0; (Antes de que comience la animación. Después de la eliminación)
}
.fade-leave-from,.fade-leave-to {
opacidad:0; (antes de que comience la animación. fade-enter-to {
Opacidad: 1; (después de que comience la animación, antes de eliminarla)
}
.fade-enter-active,.fade-leave-active {
transición:all0.2s; (inicio de animación y reinicio de eliminación)
}