0Pricing
Vue Academy · Aula

Hooks de transição em JavaScript

Hooks @before-enter, @enter, @after-enter e @leave e uso de GSAP para animações complexas.

Hooks de transição em JavaScript é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Por que usar ganchos de JavaScript

As classes CSS abrangem a maioria dos casos, mas algumas animações precisam de JavaScript, como integrar bibliotecas como GSAP, animar uma tela ou calcular valores dinâmicos. <Transition> expõe ganchos do ciclo de vida para exatamente isso.

Os ganchos disponíveis

O Vue emite eventos para cada fase: @before-enter, @enter, @after-enter, @enter-cancelled e os ganchos correspondentes de saída.

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

before-enter define o state inicial

@before-enter recebe o elemento do DOM e é executado antes da inserção. Use-o para definir os estilos iniciais, assim como faria uma classe enter-from.

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

O gancho de entrada recebe o elemento e a conclusão

@enter recebe dois argumentos: o elemento e uma função de retorno de chamada done. Você anima o elemento e depois chama done() quando terminar, para que o Vue saiba que a transição terminou.

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 });
}

Sempre chame done

Se você esquecer done(), o Vue espera indefinidamente e a transição nunca termina: after-enter nunca é executado e o elemento pode permanecer em um state de animação incompleta. Chamá-lo é obrigatório nos ganchos controlados por JS.

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

Saída com conclusão

O gancho @leave funciona da mesma forma: anime o elemento para que ele saia e depois chame done(), para que o Vue o remova do DOM.

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

Limpeza após a entrada

@after-enter é executado quando a entrada termina. Use-o para remover estilos embutidos, redefinir propriedades de transição ou acionar uma lógica subsequente.

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

Ignore o CSS com :css="false"

Quando você anima exclusivamente com JS, defina :css="false". Isso informa ao Vue para ignorar completamente a detecção de classes CSS e depender apenas das funções de retorno de chamada done para controlar o tempo. Isso também evita interferências acidentais do CSS.

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

Integrando GSAP

Os ganchos de JS são especialmente úteis com bibliotecas de animação. O GSAP pode animar gradualmente o elemento e aceitar done como sua função de retorno de chamada onComplete.

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

Ganchos de cancelamento

@enter-cancelled e @leave-cancelled são executados se uma transição for interrompida, por exemplo, quando o usuário alterna rapidamente. Use-os para interromper as animações em andamento e evitar um state residual.

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

Quando escolher ganchos de JS

Prefira ganchos de JS quando precisar de física, valores dinâmicos por elemento, integração com bibliotecas ou sequenciamento preciso. Para desaparecimentos e deslizamentos simples, as classes CSS continuam sendo mais simples e eficientes.

Verificação rápida

Por que passar :css="false" com ganchos de JavaScript?

Recapitulação

Você aprendeu os ganchos de transição em JS: @before-enter (define o state inicial), @enter/@leave (anima e depois chama done), @after-enter (faz a limpeza), além de :css="false" para ignorar as classes CSS e dos ganchos de cancelamento para lidar com interrupções.

Perguntas Frequentes

A aula “Hooks de transição em JavaScript” é grátis?

Sim — o texto completo de “Hooks de transição em JavaScript” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Hooks de transição em JavaScript”?

Hooks @before-enter, @enter, @after-enter e @leave e uso de GSAP para animações complexas. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Hooks de transição em JavaScript”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O componente Transition
  2. Transições e animações CSS
  3. Hooks de transição em JavaScript
  4. TransitionGroup para animações de listas
← Voltar para Vue Academy