0Pricing
Vue Academy · Aula

O componente Transition

v-enter-from, v-enter-active, v-enter-to, classes v-leave-* e propriedade name para classes personalizadas.

O componente Transition é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 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.

O que o componente Transition faz

O Vue oferece um componente integrado <Transition> que aplica animações de entrada e saída a um elemento ou componente único quando ele é inserido ou removido por meio de v-if ou v-show.

Ele não renderiza nenhum elemento DOM adicional - apenas gerencia as classes CSS e o tempo de execução em seu filho.

<Transition>
  <p v-if="show">Hello Vue</p>
</Transition>

Somente um elemento

<Transition> espera exatamente um filho direto único. Envolver vários elementos irmãos não funcionará - use <TransitionGroup> para listas.

O filho deve ser alternado com v-if, v-show ou um componente dinâmico.

<!-- valid: one child -->
<Transition>
  <div v-if="open" class="panel">Content</div>
</Transition>

As seis classes de transição

Durante uma entrada ou saída, o Vue adiciona e remove automaticamente seis classes em sequência.

  • v-enter-from / v-leave-from - estado inicial
  • v-enter-active / v-leave-active - fase ativa (coloque a transição aqui)
  • v-enter-to / v-leave-to - estado final
/* default prefix is "v-" */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

Dando nome à sua transição

Defina uma prop name para a transição, para que o prefixo das classes mude de v- para o seu nome. Com name="fade", as classes se tornam fade-enter-from, fade-enter-active e assim por diante.

<Transition name="fade">
  <p v-if="show">Fades in and out</p>
</Transition>

Um exemplo completo de fade

O fade clássico anima opacity. O elemento começa totalmente transparente, a classe ativa declara a transição e a classe de destino o leva à opacidade total.

.fade-enter-from {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 0.3s ease;
}
.fade-enter-to {
  opacity: 1;
}

A sequência de entrada passo a passo

Quando o elemento é inserido:

  1. fade-enter-from e fade-enter-active são adicionadas antes da renderização (opacidade 0).
  2. No quadro seguinte, fade-enter-from é removida e fade-enter-to é adicionada, fazendo a opacidade animar em direção a 1.
  3. Quando a transição termina, as classes active e to são removidas.
/* frame 1: opacity 0 (enter-from + enter-active) */
/* frame 2: opacity 1 (enter-to + enter-active) */

A sequência de saída

A saída é o espelho da entrada, usando as classes de leave. Muitas vezes, você reutiliza a mesma regra ativa para as duas direções.

.fade-leave-from {
  opacity: 1;
}
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-leave-to {
  opacity: 0;
}

v-if versus v-show

Ambos acionam transições. v-if realmente monta e desmonta o elemento, enquanto v-show o mantém no DOM e alterna display. Com v-show, o Vue gerencia a alteração de display ao redor da fase ativa para que a animação continue visível.

<Transition name="fade">
  <p v-show="visible">Toggled with display</p>
</Transition>

Aparecendo na renderização inicial

Por padrão, a transição não é executada na primeira renderização. Adicione a prop appear para que a animação de entrada seja executada quando o componente for montado pela primeira vez.

<Transition name="fade" appear>
  <p>Animates in on page load</p>
</Transition>

Transicionando entre dois elementos

Use v-if / v-else dentro de uma Transition para alternar entre dois elementos. Dê a cada um uma key exclusiva se eles tiverem a mesma tag, para que o Vue os trate como distintos.

<Transition name="fade" mode="out-in">
  <button v-if="loading" key="load">Loading...</button>
  <button v-else key="done">Done</button>
</Transition>

Movimento reduzido e acessibilidade

Respeite os usuários que preferem menos movimento. Desabilite ou reduza a duração das transições com a consulta de mídia prefers-reduced-motion para que as animações não causem desconforto.

@media (prefers-reduced-motion: reduce) {
  .fade-enter-active,
  .fade-leave-active {
    transition: none;
  }
}

Verificação rápida

O que fade-enter-from define?

Recapitulação

Você aprendeu sobre o componente integrado <Transition>: ele envolve um elemento alternado por v-if/v-show, aplica seis classes CSS (enter-from, enter-active, enter-to e os equivalentes de saída), aceita um prefixo name, appear para a primeira renderização e mode para alternâncias.

Perguntas Frequentes

A aula “O componente Transition” é grátis?

Sim — o texto completo de “O componente Transition” é 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 “O componente Transition”?

v-enter-from, v-enter-active, v-enter-to, classes v-leave-* e propriedade name para classes personalizadas. 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 1 de 4.

Quanto tempo leva a aula “O componente Transition”?

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