Este artículo es una explicación más completa y detallada compilada por el editor en combinación con documentos oficiales, con códigos más y más completos.
Este artículo proviene del documento oficial:
http://cn.vuejs.org/guide/transitions.html
Echemos un vistazo al conocimiento relevante de la animación de transición:
① Definición de animación de transición;
En pocas palabras, es qué forma desaparecerá y aparecerá cuando el módulo desaparezca y aparezca;
Si desea usar la animación de transición, agregue atributos a la etiqueta:
transición = "nombre de animación de transición"
Por ejemplo:
<div-if = "box_1" transition = "mytran"> 1 </div>
Aquí está Mytran, que es el nombre de animación de transición. Es un nombre de clase. La animación agregará múltiples extensiones diferentes basadas en este nombre (ver más abajo para más detalles)
② Eventos vinculantes de animación de transición:
【1】 V-IF
【2】 V-Show
【3】 V-For (solo activado al insertar y eliminar, puede escribirlo usted mismo o usar el complemento de la lista animada Vue);
Escribe por ejemplo, por ejemplo:
<div v-For = "i en elementos" transición = "mytran"> {{i}} </div>Un breve método de escritura de animación (ver más abajo)
【4】 Componentes dinámicos;
[5] En el nodo raíz del componente, y se desencadena mediante el método DOM de instancia VUE (por ejemplo: vm. $ Appendto (el)). Probablemente, agregue el componente a un nodo raíz.
③CSS Animación:
[1] Primero, debe tener el atributo de transición y luego obtener su valor;
【2】 En segundo lugar, hay tres nombres de clases en CSS con valores, a saber:
Suponiendo que el valor de la transición es mytran, el nombre de la clase es
ilustrar
.
En el estado de animación, el atributo de transición de CSS se coloca aquí, y la clase que representa siempre existirá en el DOM;
Además, el estilo aquí anulará el estilo proporcionado por la clase predeterminada de la etiqueta
.mytran-enter
Al ingresar, el componente se expande desde este estado CSS al estado CSS actual, y esta clase solo tiene el primer cuadro.
.mytran-leve
Al salir, el componente restaura a este estado desde el estado CSS original. Esta clase entra en vigencia desde el comienzo de la salida y se elimina al final de la salida.
Como código:
<syle> .Box {ancho: 100px; Altura: 100px; borde: 1px rojo sólido; Pantalla: bloque en línea; } /* Esto define la situación de animación y el estilo cuando existe. Este estilo anulará el estilo en la clase*/ .mytran-transition {Transition: todas las 0.3s facilitados; Color de fondo: Greenyellow; } /* .mytran-enter define el estado de inicio de entrada* / /* .mytran-leve define el estado final de partida* / .mytran-enter, .mytran-leve {altura: 0; Ancho: 0; } </style> <div id="app"> <button @click="change">Click to hide and show randomly</button> <br/> <div v-if="box_1" transition="mytran">1</div> <div v-if="box_2" transition="mytran">2</div> <div v-if="box_3" transition="mytran">3</div> </div> <script> var vm = new vue ({el: '#app', data: {box_1: true, box_2: true, box_3: true}, métodos: {cambie: function () {for (var i = 1; i <4; i ++) {this ['box_'+i] = math.Random ()> 0.5? verdadero: false;}}}}) seter 300); </script>Hacer clic aleatoriamente hará que 3 bloques se oculten o se muestren;
④ JavaScript Hook:
[1] En pocas palabras, esto no afecta la animación CSS (aún cambia en esas tres categorías);
[2] Esto se usa principalmente para obtener entrada y salida cuatro momentos cada uno, y se usa para hacer ciertas cosas;
【3】 Estos ocho momentos son:
Ingrese: antes que el Inter (antes de entrar), ingrese (antes de ingresar la animación solo se inicia), después (antes de entrar en el final de la animación), EnterCancelled (antes de que se interrumpa la entrada);
Salida: Borforeleave (antes de salir), Leave (la animación de salida acaba de comenzar), Afterleave (la animación de salida finalizó), Leavecancelled (la salida se interrumpe);
[4] La modificación de DOM se restaurará en algunos casos. Por ejemplo, modificar la propiedad TextContent de DOM en el paso de licencia restaurará el estado original cuando el DOM vuelva a ingresar; Pero si se modifica en el paso de entrada, no se restaurará.
Como código:
Vue.transition ('mytran', {beforeenter: function (el) {// antes de ingresar console.log ("Ingrese la hora de inicio de la animación:" + nueva fecha (). Gettime ());}, ingrese: function (el) {el.textContent = new date ();}, después de la función (el) {console.log ("Enter Time:"). }, BeforLeave: Function (El) {console.log ("Dejar la hora de inicio de la animación:" + nueva fecha (). GetTime ());⑤ Nombre de la clase de transición de Custom:
La razón para personalizar el nombre de la clase de transición es que no podemos requerir que el estilo de cada animación CSS esté escrito de acuerdo con el método de escritura estándar VueJS (como el código de descarga escrito por otros);
Nota: La definición debe hacerse antes de declarar la instancia VUE relevante.
En primer lugar, recomiendo una colección de animaciones recomendadas por el tutorial oficial de Vuejs: (este no es un enlace de descarga, debe abrirlo para encontrar el enlace de descarga antes de poder descargarlo)
https://daneden.github.io/animate.css/
Después de descargar, importe este archivo CSS y comience a personalizar la animación;
<div id = "app"> <botón @click = "cambiar"> Haga clic para ocultar y mostrar aleatoriamente </botón> <br/> <div-if = "box" transition = "bounce"> 1 </div> </div> <script> vue.transition ("bounce": 'bounceinleft', leveclassss: 'bouncoutright'}} '#app', data: {box: true}, métodos: {cambio: function () {this.box =! this.box; </script>explicar:
【1】 Se requieren etiquetas animales para tener la clase animada;
【2】 EnterClass y LeavecLass son equivalentes al anterior XXX-enter y xxx-leve;
【3】 El efecto es parpadear desde la izquierda y flashear desde la derecha.
[4] Debe establecer una animación antes de declarar la instancia de Vue, de lo contrario no será válido;
⑥Utilizaciones de animaciones
En Vuejs, la animación de animación y la animación de transición son diferentes.
En pocas palabras, la animación de transición se divide en tres pasos: clase permanente, clase activada al ingresar y la clase se activa al salir; Solo la clase permanente tiene atributos de animación de transición, y los otros dos pasos solo tienen el estado CSS;
Animación La animación se divide en dos pasos: la clase se activó al entrar y la clase se activó al salir. Por supuesto, la clase XXX-Transition existe en el DOM (esta clase se puede usar para establecer el origen de la animación, o simplemente no establecer esta clase);
En animación de animación, las clases de clase al ingresar y salir deben tener efectos de animación, por ejemplo:
@Keyframes Fat {0% {ancho: 100px} 50% {ancho: 200px} 100% {ancho: 100px}} .fat-leve, .fat-entrats {animation: fat 1s ambos; }Al ingresar y salir, los nombres de clases ejecutados son los mismos que las transiciones, y están en formatos de XXX-LEAVE y XXX-Iner;
Por supuesto, también puede personalizar el nombre de la clase.
Código de muestra:
<syle> .Box {ancho: 100px; Altura: 100px; borde: 1px rojo sólido; Pantalla: bloque en línea; } @Keyframes fat {0% {ancho: 100px} 50% {ancho: 200px} 100% {ancho: 100px}} .fat-leve, .fat-enter {animation: fat 1s thmy; } </style> <div id = "app"> <botón @clic = "Cambiar"> Haga clic para ocultar y mostrar aleatoriamente </boton> <br/> <div-if = "box" transition = "fat"> 1 </div> </div> <script> var vm = new vue ({el: '#app', data: {box: true}, métodos: {cambie: function () {this. }); </script>Efecto:
Desaparecer: sé más ancho primero, luego recuperar, luego desaparecer;
Entrar: aparecer, ampliar, recuperarse, quedarse;
Aquí soy vago y comparto el mismo efecto de animación.
⑦ Además de esto, hay
[1] Declare explícitamente el tipo de animación (si la animación tiene transición y animación al mismo tiempo, y uno de ellos se ejecutará en diferentes situaciones);
[2] Explicación detallada del proceso de transición (el orden de la ejecución de gancho JS y la ejecución de CSS cuando se activa la animación);
[3] CSS Animation (es decir, la animación, como se escribe anteriormente, omitida en detalles);
[4] JavaScript Transition (no es un gancho JS, un gancho significa que se llamará una determinada función en una determinada etapa, pero este gancho no tiene nada que ver con la animación) y usa JavaScript para controlar la animación, como el método animado de JQuery;
【5】 Una transición gradual utilizada por V-FOR;
Como no está disponible por el momento, se omite. Si necesita verlo, abra la conexión:
http://cn.vuejs.org/guide/transitions.html
Lo anterior es un análisis exhaustivo del caso de animación de transición Vuejs del Séptimo Vuejs introducido por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!