Cómo aplicar transiciones anidadas en Vue

Animar un elemento al mostrarlo u ocultarlo es bastante fácil en Vue: solo tiene que ajustar el elemento con el componente .

Pero, ¿qué pasa con esos casos en los que desea mostrar u ocultar niños anidados secuencialmente? Por ejemplo, después de que se muestre el elemento raíz, muestre el elemento A, y luego, muestre el elemento B, y así sucesivamente.

Esto sigue siendo algo fácil de hacer en Vue; solo necesita una forma de saber cuándo se realiza la transición anterior para comenzar la siguiente.

Si no lo ha hecho antes y se pregunta cómo, le ahorraré algo de tiempo y le mostraré cómo hacerlo de una manera limpia y controlable. Pero antes de eso, eche un vistazo a este CodePen para ver qué vamos a construir:

Como puede ver en la demostración anterior, vamos a crear un cuadro modal simple que se muestra en dos pasos (transiciones). Primero, mostramos el fondo superpuesto, y luego mostramos el cuadro de contenido blanco.

Romperé el tutorial en tres secciones. Primero, crearemos el botón y el cuadro modal. El usuario puede mostrar el cuadro modal haciendo clic en el botón y cerrarlo haciendo clic en el fondo superpuesto. En esta sección, el modal se abrirá sin animaciones.

En la segunda sección, agregaremos una transición de un solo paso, para que el fondo superpuesto y el cuadro de contenido se muestren simultáneamente.

Y en la sección final, agregaremos una transición anidada para el cuadro de contenido, que se mostrará después de que se complete la transición del fondo superpuesto.

Mostrando el cuadro modal sin animación

Comencemos rápidamente con los prototipos instantáneos de Vue CLI 3. Entonces cree App.vue y coloque lo siguiente en la sección

Tenemos aquí un botón que establece showModal en verdadero. Y cuando es cierto, mostramos el componente , como se muestra arriba. (Tenga en cuenta que todavía no hemos creado ese componente, pero lo haremos en breve).

Además, observe cómo configuramos showModal en falso cuando emite un evento personalizado cercano.

Ahora, en la sección

Y luego esto en

A continuación, creemos el componente Modal.vue, luego agreguemos lo siguiente en la sección de plantilla:


  
    
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, placeat, unde! Architecto laboriosam ducimus atque cum dolore doloribus obcaecati vero. ¿Menos porro sapiente unde fuga incidunt quidem necesitaritatibus mollitia libero?     
  

Tenga en cuenta que el elemento raíz aquí (.modal) se utiliza como fondo de superposición. Cuando el usuario hace clic en él, emite el evento de cierre.

Además, tenga en cuenta cómo estamos usando @ click.stop en .content para evitar que cierre el modal cuando se hace clic en él.

La sección

A continuación, agregue esto para el estilo:


.modal {
  posición: absoluta;
  arriba: 0;
  izquierda: 0;
  ancho: 100vw;
  altura: 100vh;
  fondo: rgba (0,0,0,0.6)
}
.contenido {
  posición: absoluta;
  arriba: 50%;
  izquierda: 50%;
  ancho: calc (100% - 20px);
  ancho máximo: 500 px;
  transformar: traducir (-50%, -50%);
  fondo: #FFF;
  radio de borde: 3px;
  acolchado: 20px;
  altura de línea: 1.5;
  tamaño de fuente: 18px;
  color: # 444;
  sombra de cuadro: 0 3px 6px rgba (0,0,0,0.16), 0 3px 6px rgba (0,0,0,0.23);
}

En este punto, debería poder abrir / cerrar el cuadro modal, pero sin animación.

Transición de un solo paso

Ahora, abramos el cuadro modal con una transición de desvanecimiento de un solo paso.

Es muy fácil de hacer. Simplemente envuelva el contenido del componente modal con , así:


  
    
      
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, placeat, unde! Architecto laboriosam ducimus atque cum dolore doloribus obcaecati vero. ¿Menos porro sapiente unde fuga incidunt quidem necesitaritatibus mollitia libero?       
    
  

Luego, defina la transición de desvanecimiento en la sección