Transiciones CSS con Vue.js: Uso del Componente Transition

Clase 6 de 23 • Curso de Vue.js: Componentes y Composition API

Resumen

¿Qué es el componente Transition en BJS?

El mundo del desarrollo web nos ofrece una diversidad de herramientas que hacen que nuestras aplicaciones sean más dinámicas y atractivas. Uno de los componentes más importantes dentro de BJS es el componente Transition. Este nos permite aplicar estilos CSS a elementos que aparecen o desaparecen en pantalla, como por ejemplo un menú desplegable.

¿Cómo se configura un proyecto de BJS?

Para empezar, creamos un proyecto base de BJS usando la CLI. Eliminamos componentes y configuraciones innecesarias para centrarnos en nuestro tema principal: un menú que se muestra y oculta. Esto se logra mediante la manipulación de una variable booleana que controlará la visibilidad del menú.

data() {
  return {
    show: false
  };
},
methods: {
  toggleMenu() {
    this.show = !this.show;
  }
}

¿Cómo crear un menú desplegable?

Para el menú, creamos un nuevo componente que muestra opciones en una lista:

<!-- Componente Menu.vue -->
<template>
  <ul v-if="show">
    <li>Opción uno</li>
    <li>Opción dos</li>
    <li>Opción tres</li>
  </ul>
</template>

¿Cómo implementar un básico VIF y VSHOW?

Usamos v-if para mostrar u ocultar el menú basándonos en la variable show. Sin embargo, v-show puede ser una alternativa para solo aplicar un CSS de display: none en vez de montar o desmontar el elemento del DOM, mejorando así el rendimiento.

¿Qué es un componente Transition?

El componente transition se utiliza para envolver un único elemento y permitir la aplicación de efectos de entrada y salida. Para configurarlo, necesitamos definir el nombre de la transición, que será utilizado para nombrar las clases CSS asociadas.

<transition name="fade">
  <menu v-if="show"></menu>
</transition>

¿Qué clases CSS son necesarias para la transición?

Al predefinir un nombre para nuestra transición, podemos crear clases CSS específicas que manejan los tres estados de una transición: inicio, activo y final. Estos se denominan from, active y to.

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

¿Cómo aplicar animaciones como fade in y fade out?

Para lograr un efecto visual suave al mostrar o ocultar el menú, podemos modificar la opacidad del elemento. Utilizamos propiedades de CSS como transition y opacity para lograr un desvanecimiento.

opacity: 0; al comenzar a ocultar el elemento
opacity: 1; cuando el elemento es completamente visible

¿Con qué elementos adicionales puedo experimentar?

Además de opacity, se puede jugar con otros atributos CSS para crear diversas animaciones.
Pruebe ajustar la duración del transition para efectos más personalizados.
Explore la API de BJS para sacar el máximo provecho del componente Transition.

Esto es solo el comienzo del fascinante mundo de las transiciones con BJS. Te animo a experimentar y compartir tus descubrimientos. ¡Atrévete a modificar, crear y desafiar los límites de tus componentes!

Guillermo Castaño Vèlez

student•

Hay otro componente que se llama transition-group, creado especialmente para listas, o elementos renderizados con v-for. Estos permiten darle un comportamiento igual el expuesto por la profe pero a los elementos que se insertan o se remueven del DOM. Vale la pena darle una mirada

Irving Caamal

student•

Recuerden que v-if desmonta o remueve completamente el elemento HTML del DOM.

y v-show solo usa display:none esto es muy importante tenerlo en cuenta para temas de performance, SEO y más.

Dufainder Bedoya

student•

El codigo de la clase para facil acceso y que se concentren mas en la clase y definiciones.

desde App.vue

<template>
  <button @click="show = !show">Menu</button>
  <transition name="fade">
    <Menu v-show="show" />
  </transition>
</template>

<script>
import Menu from "./components/vMenu.vue";
export default {
  name: "App",
  components: { Menu },
  data() {
    return {
      show: false,
    };
  },
};
</script>

AHora la parte de los estilos:

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

y desde el componente Menu.vue

<template>
  <ul>
    <li>Opcion 1</li>
    <li>Opcion 2</li>
    <li>Opcion 3</li>
  </ul>
</template>

Juan Guillermo Perez Cardozo

student•

si a alguno de ustedes como a mi les saca este error: error Component name “Menu” should always be multi-word vue/multi-word-component-names

deben ir al archivo .eslintrc.js y en la key rules:{} agregar:

"vue/multi-word-component-names": "off",

Geraldine Diaz

student•

Si no tienen archivos independientes para la configuración, seguro pueden poner esta línea de código en el package.json:

Cristian David Casallas Velandia

student•

Les recomiendo mucho usar TailwindCSS con Vue, tiene una integración super buena, incluso puedes animar esta transition de manera sencilla ejemplo:

<transition
    enter-active-class="duration-300 ease-out"
    enter-from-class="transform opacity-0"
    enter-to-class="opacity-100"
    leave-active-class="duration-200 ease-in"
    leave-from-class="opacity-100"
    leave-to-class="transform opacity-0"
  >
    <TheMenu v-show="show"></TheMenu>
  </transition>

Hector Saldaña Espinoza

student•

Oh sí, es una superventaja usar TailwindCSS con transition

Miguel Angel Reyes Moreno

student•

Vaya, qué interesante componente de Vue JS, lleva la forma de usar CSS a algo distinto.

Por cierto, Platzi tiene 2 cursos de animaciones con CSS:

David Espino

student•

Estuve revisando la documentación oficial de Vue.js, al parecer, la nueva sintaxis recomendada para el manejo de el estado de un componente es la siguiente:

<script setup>
import { ref } from 'vue';
const show = ref(true);
</script>

<template>
  <button @click="show = !show">Menú</button>
</template>

Luis Palomo

student•

Si es verdad. El curso esta bastante desactualizado pero se me hace que como Vue no tiene tanta demanda no lo van a actualizar.

Sam Leonetti

student•

**Transiciones ** Permite aplicar css al momento de determinar si un elemento aparece o desaparece en pantalla.

Por ejemplo: Utilizamos la transición para agregar un desvanecimiento al clickear el botón que muestra (U oculta) el menú.

La etiqueta es :

<transition name="fade"> </transition>

++Es importante aclarar el nombre de la transicion ++

Para empezar a utilizar las animaciones, VueJS espera que escribas unas clases con determinados nombres específicos:

En primer lugar se utiliza el nombre declarado en la etiqueta transition.

.fade-enter : elemento que entra .fade-leave: elemento que sale

Hay tres modificadores:

Cuando inicia la transición: From
El momento en el que sucede la transición: Active
Cuando termina: To

<style>
	.fade-enter-from{
		css style
	}
</style>

Cristobal Nyram

student•

Nunca está de más ver otro tipo de explicaciones https://styde.net/animaciones-transiciones-en-vue-js/

Uriel Solis Salinas

student•

Los modificadores que tiene una trancisión es:

from: cuando se inicia la transición
to: cuando se termina la transición
active: cuando se está ejecutando la transición

Para que funcione la transición, se debe agregar la clase .fade-enter-active o .fade-leave-active a los elementos que se quieren animar.

fade-enter-active: cuando se inicia la transición
fade-leave-active: cuando se termina la transición

Jeisson Lenis Marulanda

student•

Buenas tardes, pregunto a alguno le da problemas el reload cuando guardan con la terminal WSL de linux en windows? lastimosamente en la terminal de windows no puedo hacer el serve

Pero en la otra no recarga cuando guardo cambios, gracias

Diana Martinez

student•

Al ser un comportamiento de tu equipo que no es común, creo que más bien tendrías que acercarte al soporte de WSL o alguien que sepa del tema que pueda ayudarte a corregirlo.

George M

student•

Hola, Me lanza este error

error Component name "Menu" should always be multi-word vue/multi-word-component-names

un saludo

Diana Martinez

student•

Hola, si, según recuerdo no es un error, es un warning, del linter, es normal, es porque el team de Vue recomienda usar dos palabras para nombrar tus componentes (lo detecta por las mayúsculas).

Por ejemplo, cambiar "Menu.vue" por "MainMenu.vue"

No es algo obligatorio para el framework, puedes desactivar esa configuración del linter, aquí te comparto esa parte de la documentación: https://eslint.vuejs.org/rules/multi-word-component-names.html

Brayhan Andres Jaramillo Castaño

student•

Logre solucionarlo como lo indica la profe, llame el archivo MenuMain.vue

Yanhfrey Chira

student•

Actualmente cambia un poco asi seria el codigo con la nueva sintaxis.

<script setup>
import MenuDest from "./components/MenuDest.vue"
import { ref } from "vue";

const show = ref(false)

</script>

<template>
  <button @click="show = !show">Menu</button>
  <MenuDest v-if="show"/>
</template>

<style scoped>

</style>

Yefreilee Danny Samuel Parra

student•

Le coloque Font-size: 100px y si que se noto xD

Cristian Rodriguez Morales

student•

No lo veo

fabio andres zamora osorio

student•

Es verdad yo tampoco vi el color rojo que se aplica en la animacion

Brayhan Andres Jaramillo Castaño

student•

Acá pueden encontrar más ejemplos como también un preview de los mismos https://vuejs.org/guide/built-ins/transition.html#css-based-transitions

ALVARO ZENON QUISPE SEGALES

student•

Cual es el plugin para que importe automáticamente el componente?

Diana Martinez

student•

Esto puede cambiar si usas webpack o vite, tendrías que revisar las documentaciones, en Vite podrías usar el global import, se explica en el curso de Vite.

Luis Alberto Gonzales Torres

student•

Si alguien sabe como solucionar esto porfavor :c

✖ 5 problems (5 errors, 0 warnings) 5 errors and 0 warnings potentially fixable with the --fix option.

Diana Martinez

student•

Es un error de linter, ahí mismo te está diciendo que tienes que usar un comando con la opción --fix para que se solucione.

George M

student•

Hola, No me agrega el autocompletado. Que extensión se utiliza para hacerlo ? Muchas gracias un saludo

Diana Martinez

student•

La extensión recomendada por el team de Vue para Vue3, en VS Code, es Volar.

George M

student•

Muchas gracias Diana

Jaime Eduardo Falla Cardozo

student•

¿Qué ventajas o cual es la diferencia de usar transition e implementar las animaciones desde Css? La verdad no veo ninguna

Diana Martinez

student•

Transition son animaciones desde CSS, la diferencia es que el componente Transition te da los eventos de cuándo comienza o termina la actualización del componente y el DOM, por si quisieras realizar animaciones ahí.

Claro que si para tu caso de uso una transición común y corriente te sirve, mucho mejor.

Transition, igual que el resto de las características, solo están ahí porque hay casos dónde se necesitan, y por si te llegas a topar con alguno de esos, para todo lo demás, mejor usar lo estandar.