Transições e temporização
Anime entre estados usando transições.
Transições e temporização é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 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 entre estados
Os estados descrevem onde o elemento permanece; as transições descrevem como ele se move entre eles. A função transition associa uma mudança de estado a uma animação.
A função transition
transition recebe uma expressão de mudança de estado e uma ou mais etapas de animação.
transition('closed => open', animate('300ms'))Operadores de direção
Use => para uma direção e <=> para ambas.
transition('open <=> closed', animate('250ms ease-in-out'))A função animate
animate define a temporização: duração, atraso opcional e aceleração. O formato da string é "duration delay easing".
animate('500ms 100ms ease-out')Unidades de duração
As durações aceitam ms ou s. Um número sem unidade é tratado como milissegundos.
animate('0.4s')
animate('400ms')
animate(400)Funções de aceleração
A aceleração controla a variação da velocidade: linear, ease, ease-in, ease-out, ease-in-out ou uma cubic-bezier().
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)')Estilos de destino embutidos
animate pode receber um segundo argumento style para animar em direção a estilos não associados a um estado nomeado.
transition('* => active', [
animate('300ms', style({ transform: 'scale(1.1)' }))
])Várias etapas
Passe um array de etapas para executar uma sequência em uma única transição.
transition('closed => open', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
])Transições curinga
Use * para corresponder a transições de ou para qualquer estado, o que é útil para efeitos genéricos de entrada.
transition('* => open', animate('200ms'))Estilos iniciais
Um style() simples antes de animate() define o ponto inicial; em seguida, o Angular anima até os estilos do estado de destino.
transition(':enter', [
style({ opacity: 0 }),
animate('400ms', style({ opacity: 1 }))
])Boas práticas de temporização
Mantenha as transições da interface curtas (150–300 ms) para garantir responsividade. Reserve durações maiores para movimentos amplos e intencionais. Escolha a aceleração de acordo com a sensação desejada.
Verificação rápida
Teste sua compreensão de transições e temporização.
Recapitulação
Você aprendeu que transition conecta mudanças de estado (com => ou <=>) a etapas de animate. A string de temporização é duration delay easing, e você pode encadear etapas de style/animate para criar sequências.
Perguntas Frequentes
A aula “Transições e temporização” é grátis?
Sim — o texto completo de “Transições e temporização” é 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 “Transições e temporização”?
Anime entre estados usando transições. 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 2 de 4.
Quanto tempo leva a aula “Transições e temporização”?
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