Animações de entrada e saída
Anime elementos ao entrarem e saírem.
Animações de entrada e saída é uma aula grátis de Angular 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 Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Animando a presença
Muitas vezes, você quer animar os elementos quando eles aparecem ou desaparecem, por exemplo, quando um item é adicionado ou removido de uma lista. O Angular fornece os aliases :enter e :leave para isso.
void e presença
Um elemento que não está no DOM está no estado void. Entrar significa void => * e sair significa * => void.
Alias :enter
:enter é uma forma abreviada de void => *. Use-o para animar os elementos quando forem adicionados.
transition(':enter', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
])Alias :leave
:leave é uma forma abreviada de * => void. O Angular mantém o elemento no DOM até a animação de saída terminar.
transition(':leave', [
animate('300ms', style({ opacity: 0 }))
])Disparando com fluxo de controle
Aplique o acionador aos elementos gerenciados por @if ou @for. Adicioná-los ou removê-los dispara as animações de entrada ou saída.
@if (visible()) {
<div [@fade]>Hello</div>
}Um acionador de esmaecimento
Aqui está um acionador reutilizável para entrada e saída com esmaecimento.
trigger('fade', [
transition(':enter', [
style({ opacity: 0 }),
animate('200ms', style({ opacity: 1 }))
]),
transition(':leave', [
animate('200ms', style({ opacity: 0 }))
])
])Exemplo de entrada deslizante
Combine transformação e opacidade para criar um efeito de entrada deslizante.
transition(':enter', [
style({ transform: 'translateY(-10px)', opacity: 0 }),
animate('250ms ease-out',
style({ transform: 'translateY(0)', opacity: 1 }))
])Animações de itens de lista
Coloque o acionador em cada item dentro de @for; adicionar ou remover itens anima cada um deles de forma independente.
@for (item of items(); track item.id) {
<li [@fade]>{{ item.name }}</li>
}Por que a saída precisa do mecanismo
Normalmente, um elemento removido desaparece instantaneamente. O mecanismo de animações intercepta a remoção, mantém o nó, executa a animação :leave e então o remove, tudo automaticamente.
Desativando animações
Associe @.disabled para ignorar animações condicionalmente, o que é útil para preferências de movimento reduzido ou para a renderização inicial.
<div [@.disabled]="prefersReducedMotion">...</div>Boas práticas
Mantenha as animações de entrada e saída curtas e sutis. Respeite prefers-reduced-motion. Para obter fluidez, anime transformação e opacidade (compatíveis com a GPU), em vez de propriedades de layout.
Verificação rápida
Verifique sua compreensão das animações de entrada e saída.
Recapitulação
Você aprendeu que :enter (void => *) e :leave (* => void) animam os elementos quando eles são adicionados e removidos, funcionando com @if/@for. O mecanismo mantém os nós que estão saindo até que a animação seja concluída.
Perguntas Frequentes
A aula “Animações de entrada e saída” é grátis?
Sim — o texto completo de “Animações de entrada e saída” é 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 Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Animações de entrada e saída”?
Anime elementos ao entrarem e saírem. Você pratica Angular 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 Angular Academy?
Nenhuma experiência prévia é necessária. Angular 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 “Animações de entrada e saída”?
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 Angular Academy?
Sim. Cada aula de Angular 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
- Fundamentos de animação: trigger e state
- Transições e temporização
- Animações de entrada e saída
- Quadros-chave e escalonamento