Hola Habr! Decidí comenzar mi actividad traduciendo artículos al ruso, lo que yo mismo me beneficié enormemente. Espero que te sea útil. Observo que intenté traducir literario, no textualmente.
En primer lugar, presento una traducción del artículo
"Vue.js render funciones y transiciones" por Hajime Yamasaki Vukelic.
Vue.js render funciones y transiciones
La documentación de Vue.js con respecto a las funciones de representación es deficiente. Para los usuarios que usan JSX con funciones de renderizado, esto puede crear problemas. En este artículo, veremos cómo crear transiciones en este escenario particular.
Utilizo JSX en los ejemplos, pero todo funciona con funciones simples de representación de JavaScript, ya que JSX es solo azúcar sintáctico para llamadas h (). Si desea saber más sobre este tema, consulte este
artículo .
Cómo funcionan las transiciones en general
La esencia de las transiciones es que tiene un componente de transición incorporado que asigna clases a los elementos que se montan (entran) o se desmontan (se van).
Danza Pikabu
El matiz principal: cómo determinar el lugar de instalación o desmontaje de los elementos. Este problema puede resolverse de varias maneras.
Puede usar el operador ternario para implementar la aparición / desaparición de un elemento:
render(h) { <transition> {this.showDiv ? <div class="myDiv">Hello</div> : null} </transition> }
o para reemplazar un artículo con otro:
render(h) { <transition> {this.showOneOrTheOther ? <div class="myDiv">Hello</div> : <div class="myOtherDiv">Hello again</div> } </transition> }
No, solo estaba bromeando. Por supuesto, no puede usar el operador ternario sin parámetros adicionales para reemplazar dichos elementos. Sin embargo, hay un matiz. El algoritmo de comparación decide que ya hay un elemento allí, por lo que en lugar de eliminarlo del DOM, simplemente lo arregla para que se vea como otro elemento.
Será mejor si usa la tecla al reemplazar elementos:
render(h) { <transition> {this.showOneOrTheOther ? <div key="myDiv" class="myDiv">Hello</div> : <div key="myOtherDiv" class="myOtherDiv">Hello again</div> } </transition> }
Si hay una clave, dos elementos se cambian por completo (el antiguo se desmonta y el nuevo se monta en su lugar), mientras que las claves son diferentes.
Del mismo modo, si desea intercambiar un componente o elemento de otro del mismo componente / elemento:
render(h) { <transition> <div key={this.subcomponentKey}> <MyComponent /> </div> </transition> }
En el ejemplo anterior, el método this.subcomponentKey va a calcular de alguna manera la clave correspondiente para el componente MyComponent.
Diferencias clave
Mientras hablamos de claves, recuerde que los elementos / componentes siempre se muestran completamente cuando se cambia la clave. Por otro lado, mientras la clave permanezca igual, los elementos / componentes no cambian.
No dejes que esto te tome por sorpresa. Antes de agregar accidentalmente una clave a casi todo lo que se mueve (o debería moverse), considere cuidadosamente cuál debería ser el valor de esta clave. Primero verifique sin una clave, escriba los resultados, y luego agregue la clave y vea si puede repetir el mismo efecto. Si la interfaz de usuario no se actualizará, probablemente haya seleccionado el valor de clave incorrecto.
Agregar animación
Ahora que sabemos cómo hacer que nuestros elementos desaparezcan y vuelvan, es hora de trabajar en la animación.
En el caso más simple, tenemos dos clases. Una clase siempre se aplica y la otra se aplica cuando un elemento / componente se ensambla o se desmonta.
// my.css .base { transition: transform 1s; } .out { transform: translateX(-100vw); }
Ahora agregue estas clases al código:
render(h) { <transition enter-class="out" leave-to-class="out"> {this.someProp ? <div class="base">Hello</div> : null} </transition> }
Estas clases (enter-class y leave-to-clas) están bien descritas en la
documentación . Lee sobre ellos allí.
La clase enter sirve como repositorio de estilos que se aplican inmediatamente después de montar un elemento. Inmediatamente después de esto, la clase se elimina. Agregamos transiciones para crear una animación entre el momento en que se usa la clase enter y el momento en que no lo es (cuando solo se usa la clase .base).
La clase de permiso de clase se aplica inmediatamente antes de eliminar un elemento. Vue.js luego espera a que se complete la animación y luego elimina el elemento del árbol DOM. Nuevamente, usamos transiciones para crear animaciones.
En nuestro ejemplo, usamos la misma clase .out para entrar y salir, pero podemos usar diferentes clases para dos eventos.
Conclusión
Esperemos que ahora comprenda los conceptos clave de las transiciones de Vue.js cuando se usa en funciones de representación y con JSX. Sin embargo, las transiciones de Vue.js ofrecen muchas más funciones, como la capacidad de conectarse a eventos de transición usando JavaScript y, por lo tanto, hacer incluso algunas cosas que no están relacionadas con la animación (como trampas de ciclo de vida). Terminaré el artículo aquí y dejaré los experimentos a mis queridos lectores.
¡Feliz pirateo!