A través del sistema de transición de Vue.js, puede agregar fácilmente los efectos de animación de transición al proceso de insertar/eliminar nodos DOM. Vue agregará/eliminará los nombres de clase CSS en el momento apropiado para activar los efectos de transición/animación CSS3. También puede proporcionar la función de gancho JavaScript correspondiente para realizar operaciones DOM personalizadas durante el proceso de transición.
Tomar la instrucción V-Transition = "My-Transition" como ejemplo, cuando el nodo DOM con esta instrucción se inserta o elimina, Vue lo hará:
Use la ID de My-Transition para averiguar si hay un objeto de gancho JavaScript registrado. Este objeto puede registrarse globalmente por Vue.Transition (ID, Hooks) o definirse dentro del componente actual a través de la opción de transiciones. Si se encuentra este objeto, el gancho correspondiente se llamará en diferentes etapas de la animación de transición.
Detectar automáticamente si el elemento de destino tiene efectos de transición CSS o efectos de animación aplicados, y agregue/elimine el nombre de la clase CSS en el momento apropiado.
Si no se proporciona ninguna función de gancho JavaScript y no se detecta el efecto de transición/animación de CSS correspondiente, la inserción/eliminación del DOM se realiza inmediatamente en el siguiente cuadro.
Todos los efectos de transición Vue.js solo entrarán en vigencia si la operación DOM se activa a través de Vue.js. La activación se puede hacer mediante instrucciones incorporadas, como V-IF, o mediante métodos de instancia VUE, como VM. $ AppendTo ().
Efecto de transición CSS
Un efecto de transición CSS típico se define de la siguiente manera:
<div-if = "show" v-transition = "expandir"> hola </div>
También debe definir tres clases de CSS: .Excand-Transition, .EXPAND-Enter y .Excand-Leave:
.expand-transition {Transición: todas las facilidad de .3s; Altura: 30px; relleno: 10px; Color de fondo: #EEE; desbordamiento: oculto;}. expandir-entrar, .expand-leve {altura: 0; relleno: 0 10px; Opacidad: 0;}Al mismo tiempo, también puede proporcionar ganchos de JavaScript:
Vue.transition ('expand', {beforeenter: function (el) {el.TextContent = 'beforeenter'}, enter: function (el) {el.TextContent = 'Enter'}, dateenter: function (el) {el.TextContent = 'Dareenter'}, enterCancelled: function (el El) {//////cleation, `biforeLee,` biforeLee, `bift function (el) {el.TextContent = 'BorForeleave'}, Leave: Function (El) {El.TextContent = 'Leave'}, AfterleAve: function (El) {El.TextContent = 'AfterleAve'}, LeAVecancEled: function (El) {// manejar la cancelación}})resultado
El nombre de la clase CSS utilizado aquí está determinado por el valor de la Directiva V-Transition. Tomando V-Transition = "Fade" como ejemplo, la clase CSS. La transición de fada siempre existirá, y. Cuando la Directiva V-Transition no proporciona un valor, los nombres de clase CSS utilizados serán el valor predeterminado .V-Transition, .v-entrer y .v-leve.
Cuando el Atributo Mostrar cambia, Vue insertará/eliminará el elemento <Div> en función de su valor actual, y agregará/eliminará la clase CSS correspondiente en el momento apropiado, de la siguiente manera:
Cuando el espectáculo se vuelve falso, Vue lo hará:
1. Llame al gancho Borforeleave;
2. Aplique la clase CSS .V-LEAVE en el elemento para activar el efecto de transición;
3. Llame al gancho de licencia;
4. Espere a que se ejecute el efecto de transición; (Escuche el evento de transición)
5. Retire los elementos del DOM y elimine la clase CSS .V-leve.
6. Llame al gancho posterior.
Cuando el espectáculo es verdadero, Vue lo hará:
1. Llame al gancho del antes del antes del gancho;
2. Aplique la clase CSS.V-enter en el elemento;
3. Inserte el elemento en el DOM;
4. Llame al gancho Enter;
5. Aplique la clase .v-entrado y luego forzar el diseño de CSS para garantizar que .v-enter surja en vigencia; Finalmente, elimine .V-entre para activar el elemento a la transición a su estado original.
6. Espere a que se ejecute el efecto de transición;
7. Llame al anzuelo posterior.
Además, si se elimina un elemento que está ejecutando un efecto de transición entrante antes de que se haya completado la transición, se ejecutará el gancho EnterCancelled. Este gancho se puede utilizar para el trabajo de limpieza, como eliminar los temporizadores creados en Enter. Lo mismo se aplica a los elementos que se están reinsertando durante la transición.
Cuando se ejecutan todas las funciones de gancho anteriores, esto apunta a la instancia VUE correspondiente. Si un elemento en sí es el nodo raíz de una instancia de Vue, la instancia se aplicará como esta; De lo contrario, esto apunta a la instancia a la que pertenece la instrucción de transición.
Finalmente, las funciones de gancho Enter y Leave pueden aceptar un segundo parámetro opcional: una función de devolución de llamada. Cuando su firma de función contiene un segundo parámetro, significa que espera usar esta devolución de llamada para completar explícitamente todo el proceso de transición, en lugar de depender de Vue para detectar automáticamente los eventos de transición de las transiciones CSS. Por ejemplo:
Enter: function (el) {// No segundo parámetro // El final del efecto de transición está determinado por el evento final de transición CSS}VS
Enter: function (el, ded) {// Hay un segundo parámetro // El final del efecto de transición debe determinarse llamando manualmente `Done`}Cuando múltiples elementos realizan efectos de transición al mismo tiempo, Vue.js lotará el proceso para garantizar que el diseño forzado se active solo una vez.
Animación CSS
Las animaciones de CSS se llaman de la misma manera que el efecto de transición CSS. La diferencia es que en la animación, la clase .v-enter no se elimina inmediatamente después de que el nodo se inserta en el DOM, pero se elimina cuando se activa el evento AnimationEd.
Ejemplo: (Prefijo de compatibilidad omitido)
<span v-show = "show" v-transition = "bounce"> ¡Mírame! </span>
.Bounce-entrat {animación: bounce-in .5s;}. Bounce-leve {animation: bounce-out .5s;}@Keyframes Bounce-In {0% {Transform: Scale (0); } 50% {transformación: escala (1.5); } 100% {transformación: escala (1); }}@Keyframes Bounce-Out {0% {Transform: Scale (1); } 50% {transformación: escala (1.5); } 100% {transform: escala (0); }}resultado
Efectos de transición de JavaScript puro
También puede usar ganchos JavaScript sin definir ninguna regla de transición CSS. Cuando se usa solo ganchos de JavaScript, los ganchos de entrada y licencia deben usar la devolución de llamada hecha; de lo contrario, se llamarán sincrónicamente y la transición terminará de inmediato. En el siguiente ejemplo, usamos jQuery para registrar un efecto de transición JavaScript personalizado:
Vue.transition ('fade', {enter: function (el, ded) {// El elemento se ha insertado en el DOM en este momento // llamada realizada cuando la animación se completa $ (el) .csss ('opacity', 0) .animate ({{{Opacity: 1}, 1000, ded)}, enterCancelled: function (el) {el). // Similar al gancho Enter $ (el) .animate ({opacidad: 0}, 1000, hecho)}, leavecancelled: function (el) {$ (el) .stop ()}})Después de definir esta transición, puede llamarlo especificando la identificación correspondiente a V-transición:
<p v-transition = "fade"> </p>
Si un elemento que solo usa los efectos de transición de JavaScript se ve afectado por otras reglas de transición/animación de CSS, esto puede interferir con el mecanismo de detección de transición CSS de VUE. Al encontrar esta situación, puede prohibir la detección de CSS agregando CSS: falso a su objeto de gancho.
Efecto de transición gradualmente
Al usar V-Transition y V-Repeat, podemos agregar un efecto de transición progresivo al elemento de lista. Solo necesita agregar características de escalón, entretenimiento o licencia (en milisegundos):
<div V-Repeat = "List" V-Transition Stegger = "100"> </div>
O también puede proporcionar ganchos de tazas, entertas o evesteragger para un control granular más fino:
Vue.transition ('stagger', {stagger: function (index) {// Agregar retraso de 50 ms a cada elemento de transición, // pero el retraso máximo es 300 ms return Math.min (300, índice * 50)}})Ejemplo:
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.