Del curso: Vue.js esencial

Accede al curso completo hoy mismo

Únete hoy para acceder a más de 24.700 cursos impartidos por expertos del sector.

Transiciones en Vue.js

Transiciones en Vue.js

Vue ofrece un componente que se llama transition que podemos utilizar para crear transiciones cuando un objeto aparece o desaparece de la interfaz. Como en este ejemplo, puedes notar que yo tengo un menú y, a la hora de hacer clic en alguna de las opciones, hay una animación para poder así ocultar el componente que está anteriormente y mostrar el siguiente. Yo aquí ya me encuentro dentro del código dentro de la aplicación que vistes anteriormente. Yo estoy utilizando las directivas v-if, v-else-if y v-else para poder mostrar el componente correspondiente según la opción del menú que se ha seleccionado. Aquí puedes ver que yo estoy envolviendo todas estas instancias dentro del componente transition. De esta manera, entonces, este componente va a poder controlar los efectos de animación de cada uno de estos componentes. Para poder definir cómo se comporta la animación, yo debo utilizar estas clases que ves aquí. Estas son clases predefinidas que contiene Vue que se utilizan para…

Contenido