Fundamentos de animação: trigger e state
Defina estados e gatilhos de animação.
Fundamentos de animação: trigger e state é uma aula grátis de Angular 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 Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Animações do Angular
O sistema de animações do Angular é uma DSL declarativa baseada na API de Animações da Web. Você descreve estados e transições, e o Angular cuida do tempo e das atualizações do DOM.
Configuração
Forneça as animações na configuração de inicialização para ativar o mecanismo de animações.
bootstrapApplication(AppComponent, {
providers: [provideAnimationsAsync()]
});O acionador
Um trigger dá nome a uma animação e agrupa seus estados e transições. Você o associa a um elemento por meio de uma associação.
animations: [
trigger('openClose', [
// states and transitions
])
]Definindo estados
state associa um estado nomeado a um conjunto de estilos CSS que o elemento deve ter enquanto estiver nesse estado.
state('open', style({ height: '200px', opacity: 1 })),
state('closed', style({ height: '0px', opacity: 0 }))A função style
style recebe um objeto de propriedades CSS. Use chaves em camelCase ou nomes CSS entre aspas.
style({ backgroundColor: '#1976d2', transform: 'scale(1)' })Associando o acionador
No modelo, associe @triggerName a uma expressão que retorne o estado atual.
<div [@openClose]="isOpen ? 'open' : 'closed'">
Content
</div>Um acionador completo
Aqui está um acionador com dois estados e uma transição entre eles.
trigger('openClose', [
state('open', style({ height: '200px' })),
state('closed', style({ height: '0px' })),
transition('open <=> closed', animate('300ms ease'))
])Controlando o estado a partir do componente
O componente apenas alterna um valor booleano ou uma string; o Angular interpola entre os estilos dos estados correspondentes.
isOpen = signal(true);
toggle() { this.isOpen.update(v => !v); }Estado curinga
O curinga * corresponde a qualquer estado e é útil para padrões e para as animações de entrada e saída abordadas mais adiante.
state('*', style({ opacity: 1 }))Estado void
O estado especial void representa um elemento que não está no DOM e é a base das animações de entrada e saída.
Por que usar animações declarativas?
Animações declarativas mantêm a lógica de temporização fora dos componentes, integram-se ao ciclo de vida do Angular e limpam automaticamente os elementos quando eles saem do DOM.
Verificação rápida
Teste sua compreensão dos conceitos básicos de animação.
Recapitulação
Você aprendeu que as animações do Angular usam um trigger contendo definições de state (cada uma associando um nome a style), vinculado no modelo por meio de [@trigger]. Os estados void e * abrangem estados ausentes e quaisquer estados.
Perguntas Frequentes
A aula “Fundamentos de animação: trigger e state” é grátis?
Sim — o texto completo de “Fundamentos de animação: trigger e state” é 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 “Fundamentos de animação: trigger e state”?
Defina estados e gatilhos de animação. 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 1 de 4.
Quanto tempo leva a aula “Fundamentos de animação: trigger e state”?
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