El sistema de transición de Vue.js le permite aplicar automáticamente los efectos de transición cuando los elementos se insertan o eliminan del DOM. Vue.js activará las transiciones o animaciones de CSS para usted en el momento adecuado, y también puede proporcionar la función de gancho JavaScript correspondiente para realizar operaciones DOM personalizadas durante el proceso de transición.
Para aplicar el efecto de transición, debe usar la función de transición en el elemento de destino:
<div-if = "show" transition = "my-transition"> </div>
La función de transición se puede usar con los siguientes recursos:
• V-IF
• V-Show
• V-For (disparado solo al insertar y eliminar, utilizando el complemento de lista animada de Vue)
• Componentes dinámicos (ver componentes para la introducción)
• En el nodo raíz del componente, y activado por el método DOM de instancia VUE (como VM. $ AppendTo (El)).
Al insertar o eliminar un elemento con una transición, Vue:
1. Intente encontrar el objeto de gancho de transición JavaScript con ID "My -Transition" - Regístrese con la opción Vue.Transition (ID, Hooks) o Transitions. Si se encuentra, el gancho correspondiente se llamará en diferentes etapas de la transición.
2. Oflifique automáticamente el elemento de destino para transiciones o animaciones CSS, y agregue/elimine el nombre de la clase CSS cuando sea apropiado.
3. Si no se encuentra el gancho JavaScript y no se detecta la transición/animación CSS, la operación DOM (insertar/eliminar) se ejecuta inmediatamente en el siguiente cuadro.
Transición CSS
Ejemplo
Una transición CSS típica es como esta:
<div-if = "show" transition = "expand"> hola </div>
Luego agregue las reglas CSS para `.Ext-Transition`,` .EXPAND-ENER` y `.EXPAND-LEAVE`:
/* Requerido*/. Expandir la transición {transición: todas las facilidad de .3s; Altura: 30px; relleno: 10px; Color de fondo: #EEE; desbordamiento: Hidden;}/* .Excand-enter define el estado de entrada de inicio* //*. Exexand-Leave Define el estado final de la salida*/. Expand-Enter, .Excand-Leve {Height: 0; relleno: 0 10px; Opacidad: 0;}Puede lograr diferentes transiciones en el mismo elemento a través de la unión dinámica:
<div-if = "show": transition = "transitionName"> Hello </div>
nuevo vue ({el: '...', Data: {show: false, transitionName: 'fade'}})Además, se pueden proporcionar ganchos de JavaScript:
Vue.transition('expand', { beforeEnter: function (el) { el.textContent = 'beforeEnter' }, enter: function (el) { el.textContent = 'enter' }, afterEnter: function (el) { el.textContent = 'afterEnter' }, enterCancelled: function (el) { // handle cancellation }, beforeLeave: function (El) {el.TextContent = 'BorForeleave'}, Leave: Function (El) {El.TextContent = 'Leave'}, AfterleAve: function (El) {El.TextContent = 'AffleLeave'}, LeavecancEled: function (el) {// manejar la cancelación}})Nombre de clase de transición CSS
La adición y el cambio de nombres de clases dependen del valor del atributo de transición. Por ejemplo, Transition = "Fade", habrá tres nombres de clase CSS:
1 .. la transición fallada siempre se conserva en el elemento.
2..Fade-Enter Define el estado inicial de ingresar a la transición. Aplique solo un marco y elimínelo de inmediato.
3..e-fade-leve define el estado final de abandonar la transición. Efectivo al comienzo de la transición de partida y eliminar después de que termina.
Si el atributo de transición no tiene valor, los nombres de clases son .v-Transition, .v-enter y .v-leve por defecto.
Nombre de clase de transición personalizada
1.0.14 Nuevo
Podemos declarar un nombre de clase de transición CSS personalizado en una definición de transición JavaScript. Estos nombres de clase personalizados anulan los nombres de clase predeterminados. Puede ser muy útil cuando necesita cooperar con bibliotecas de animación CSS de terceros como Animate.css:
<div v-show = "ok" transition = "Bounce"> Mírame Bounce </div>
Vue.Transition ('Bounce', {EnterClass: 'Bounceinleft', Leaveclass: 'Bounceoutright'})Declarar explícitamente el tipo de transición CSS
1.0.14 Nuevo
Vue.js necesita agregar un oyente de eventos al elemento de transición para escuchar cuándo finaliza la transición. Basado en el CSS utilizado, el evento es un Transitionend o Animationend. Si solo usa uno de los dos, Vue.js podrá inferir automáticamente el tipo de evento correspondiente en función de las reglas CSS efectivas. Sin embargo, en algunos casos, un elemento puede necesitar tener dos tipos de animaciones al mismo tiempo. Por ejemplo, es posible que desee que Vue active una animación CSS, y el elemento tiene un efecto de transición CSS cuando el mouse está suspendido. En este caso, debe declarar explícitamente el tipo de animación (animación o transición) que desea que Vue lo maneje:
Vue.transition ('Bounce', {// Este efecto de transición solo escuchará el tipo de evento `AnimationEd`: 'Animación'})Explicación detallada del proceso de transición
Cuando cambia la propiedad del programa, Vue.js insertará o eliminará el elemento <div> en consecuencia, cambiando el nombre de la clase CSS de transición de acuerdo con las siguientes reglas:
• Si el programa se vuelve falso, vue.js:
1. Llame al gancho Borforeleave;
2. Agregue el nombre de la clase V-Leve al elemento para activar la transición;
3. Llame al gancho de licencia;
4. Espere a que finalice la transición (escuche el evento de transición);
5. Eliminar elementos del DOM y eliminar el nombre de la clase V-Leave;
6. Llame al gancho posterior.
• Si el programa se hace realidad, Vue.js:
1. Llame al gancho del antes del antes del gancho;
2. Agregue el nombre de la clase V-Enter al elemento;
3. Insérvelo en el DOM;
4. Llame al gancho Enter;
5. Forzar el diseño de CSS una vez para que V-entre sea efectivo. Luego elimine el nombre de la clase V-Entring para activar la transición y volver al estado original del elemento;
6. Espere a que termine la transición;
7. Llame al anzuelo posterior.
Además, si se elimina un elemento mientras su transición de entrada aún está en progreso, el gancho EnterCancelled se llama para limpiar los cambios o ingresar temporizadores creados. Lo mismo es cierto para dejar la transición a su vez.
Cuando se llaman todas las funciones de gancho anteriores, esto apunta a la instancia de Vue a la que pertenecen. Reglas de compilación: en qué contexto se compila la transición, es este punto a qué contexto.
Finalmente, ingrese y vaya puede tener un segundo parámetro de devolución de llamada opcional que controla explícitamente cómo termina la transición. Por lo tanto, no hay necesidad de esperar el evento de transición CSS, Vue.js esperará a que llame a esta devolución de llamada manualmente para finalizar la transición. Por ejemplo:
Enter: function (el) {// No hay segundo parámetro // El evento de transición CSS determina cuándo finaliza la transición}vs.
Enter: function (El, Done) {// Hay un segundo parámetro // La transición solo termina cuando `Done` se llama}<p> Cuando múltiples elementos se transmiten juntos, Vue.js se agrupará y solo forzará el diseño una vez.
Animación CSS
El uso de la animación CSS está en transición a CSS. La diferencia es que en la animación, el nombre de la clase V-Entring no se elimina inmediatamente después de que el nodo se inserta en el DOM, sino que se elimina cuando se activa el evento Animationend.
Ejemplo: (Prefijo de compatibilidad omitido)
<span v-show = "show" transition = "bounce"> ¡Mírame! </span> .Bounce-Transition {display: inline-block; /* De lo contrario, la animación a escala no funcionará*/}. Bounce-entrats {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); }}Transición de JavaScript
También puede usar solo ganchos de JavaScript sin definir ninguna regla CSS. Al usar solo JavaScript, los ganchos de entrada y licencia deben llamar a la devolución de llamada realizada, de lo contrario se llamará sincrónicamente y la transición terminará de inmediato.
Es una buena idea declarar explícitamente CSS: Falso para las transiciones de JavaScript, y Vue.js saltará la detección de CSS. Esto también evitará que las reglas CSS interfieran con la transición inadvertidamente.
En el siguiente ejemplo, usamos jQuery para registrar una transición de JavaScript personalizada:
Vue.transition ('fade', {css: false, enter: function (el, ded) {// El elemento se ha insertado en el DOM // llamado después de la animación $ (el) .csss ('opacidad', 0) .animate ({{{Opacity: 1}, 1000, ded)}, enterCancelled: function (el) {el). // Igual que ingrese $ (el) .animate ({opacidad: 0}, 1000, hecho)}, leavecancelled: function (el) {$ (el) .stop ()}})Luego use la función de transición:
<p transition = "fade"> </p>
Transición asintótica
Las transiciones se pueden usar junto con V-For para crear una transición asintótica. Agregue una característica de escalón, entretenga o huelga de licencia al elemento de transición:
<div v-For = "item in list" transition = "stagger" stegger = "100"> </div>
Alternativamente, proporcione un gancho, entretenga, espina o baja para un mejor control:
Vue.transition ('stagger', {stagger: function (index) {// Cada elemento de transición agrega retraso de 50 ms // pero el límite de retraso máximo es 300 ms return Math.min (300, índice * 50)}})Este artículo ha sido compilado en el "Tutorial de aprendizaje de componentes front-end Vue.js", y todos son bienvenidos a aprender y leer.
Para obtener tutoriales en los componentes Vue.js, haga clic en el tema especial Vue.js Component Learning Tutorial para aprender.
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.