<Transition> Transições de Entrada/Saída
Última atualização: 2026-10-22
<Transition> Transições de Entrada/Saída
O
| Grupo | Integrados |
|---|---|
| Tipo | Componente / Elemento |
| Escopo | Template |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
<Transition name="fade">
<p v-if="show">conteúdo</p>
</Transition>
/* Classes: fade-enter-active / fade-enter-from / fade-enter-to (o mesmo para leave) */
.fade-enter-active { transition: opacity .3s }
.fade-enter-from { opacity: 0 }⚙️ Argumentos
| props | name (prefixo das classes) / appear / mode (out-in etc.) / duration / css:false para ativar hooks JS |
|---|
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Toggling fades the paragraph out and back in over ~0.3s.💡 Pontos-chave
💡 Dica O name define o prefixo das classes (fade-*); sem ele, usa-se o padrão v-*.
⚠️ Aviso Permite apenas um elemento/componente raiz: para vários elementos, use ou branches v-if/v-else.
ℹ️ Nota mode="out-in" espera a saída terminar antes da entrada, evitando saltos de posição.
🏷️ Integrados relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Por que nenhuma animação acontece?
R Na maioria das vezes falta o CSS correspondente ou o prefixo das classes não combina com o name; verifique regras como fade-enter-active.
P CSS e hooks JS podem ser combinados?
R Sim, mas com css:false o controle fica apenas nos hooks JS, evitando controle duplo.
P E animações de lista?
R Use <TransitionGroup>, que oferece transição de movimento com a classe .move.
