0Pricing
Vue Academy · Lección

Hooks de transición de JavaScript

Hooks @before-enter, @enter, @after-enter y @leave, y uso de GSAP para animaciones complejas.

Hooks de transición de JavaScript es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Por qué usar hooks de JavaScript

Las clases CSS cubren la mayoría de los casos, pero algunas animaciones necesitan JavaScript: integrar bibliotecas como GSAP, animar canvas o calcular valores dinámicos. <Transition> expone hooks del ciclo de vida precisamente para estos casos.

Hooks disponibles

Vue emite eventos para cada fase: @before-enter, @enter, @after-enter, @enter-cancelled y los hooks correspondientes de salida.

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @leave="onLeave"
>
  <div v-if="show">Animated by JS</div>
</Transition>

before-enter establece el estado inicial

@before-enter recibe el elemento DOM y se ejecuta antes de la inserción. Utilícelo para establecer los estilos iniciales, igual que haría una clase enter-from.

function onBeforeEnter(el) {
  el.style.opacity = 0;
  el.style.transform = "translateY(20px)";
}

enter recibe el y done

@enter recibe dos argumentos: el elemento y una función de callback done. Anime el elemento y, cuando termine, llame a done() para que Vue sepa que la transición ha finalizado.

function onEnter(el, done) {
  // animate to final state
  el.style.transition = "all 0.4s ease";
  el.style.opacity = 1;
  el.style.transform = "translateY(0)";
  el.addEventListener("transitionend", done, { once: true });
}

Llame siempre a done

Si olvida done(), Vue espera indefinidamente y la transición nunca termina: after-enter nunca se ejecuta y el elemento puede quedarse en un estado de animación incompleto. Llamarlo es obligatorio en los hooks controlados por JavaScript.

function onEnter(el, done) {
  // ... animate ...
  setTimeout(done, 400); // fallback if no transitionend
}

leave con done

El hook @leave funciona de la misma manera: anime el elemento para sacarlo y, después, llame a done() para que Vue lo elimine del DOM.

function onLeave(el, done) {
  el.style.transition = "all 0.3s ease";
  el.style.opacity = 0;
  el.addEventListener("transitionend", done, { once: true });
}

after-enter para la limpieza

@after-enter se ejecuta cuando termina la entrada. Utilícelo para eliminar estilos en línea, restablecer propiedades de transición o activar lógica posterior.

function onAfterEnter(el) {
  el.style.transition = "";
  el.style.transform = "";
}

Omitir CSS con :css="false"

Cuando la animación se realiza exclusivamente con JavaScript, establezca :css="false". Esto indica a Vue que omita por completo la detección de clases CSS y que se base únicamente en sus callbacks done para controlar el tiempo. También evita interferencias accidentales del CSS.

<Transition
  :css="false"
  @enter="onEnter"
  @leave="onLeave"
>
  <div v-if="show">Pure JS animation</div>
</Transition>

Integrar GSAP

Los hooks de JavaScript son especialmente útiles con las bibliotecas de animación. GSAP puede animar gradualmente el elemento y aceptar done como callback de onComplete.

function onEnter(el, done) {
  gsap.from(el, {
    opacity: 0,
    y: 30,
    duration: 0.4,
    onComplete: done
  });
}

Hooks de cancelación

@enter-cancelled y @leave-cancelled se ejecutan si se interrumpe una transición, por ejemplo, si el usuario alterna rápidamente. Utilícelos para detener los tweens en ejecución y evitar estados residuales.

function onEnterCancelled(el) {
  gsap.killTweensOf(el);
}

Cuándo elegir hooks de JavaScript

Elija hooks de JavaScript cuando necesite física, valores dinámicos para cada elemento, integración con bibliotecas o una secuenciación precisa. Para desvanecimientos y deslizamientos simples, las clases CSS son más sencillas y ofrecen un mejor rendimiento.

Comprobación rápida

¿Por qué se debe pasar :css="false" con los hooks de JavaScript?

Repaso

Aprendió los hooks de transición de JavaScript: @before-enter (establecer el estado inicial), @enter/@leave (animar y después llamar a done), @after-enter (limpieza), además de :css="false" para omitir las clases CSS y los hooks de cancelación para las interrupciones.

Preguntas frecuentes

¿La lección «Hooks de transición de JavaScript» es gratis?

Sí — el texto completo de «Hooks de transición de JavaScript» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Hooks de transición de JavaScript»?

Hooks @before-enter, @enter, @after-enter y @leave, y uso de GSAP para animaciones complejas. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Hooks de transición de JavaScript»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. El componente Transition
  2. Transiciones y animaciones CSS
  3. Hooks de transición de JavaScript
  4. TransitionGroup para animaciones de listas
← Volver a Vue Academy