TransitionGroup para animações de listas
Animação de listas v-for, transições de movimento e animações escalonadas com atraso.
TransitionGroup para animações de listas é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 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.
Animando listas
<Transition> lida com um único elemento. Para listas renderizadas com v-for, use <TransitionGroup>, que anima os itens quando são adicionados, removidos ou reordenados.
A propriedade tag
Ao contrário do componente de transição, o TransitionGroup pode renderizar um elemento contêiner real. Passe tag="ul" (ou qualquer outra tag) e ele produzirá esse elemento ao redor dos itens da lista.
<TransitionGroup name="list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</TransitionGroup>Cada item precisa de uma chave
Uma :key exclusiva em cada item é obrigatória. O Vue a usa para acompanhar quais itens se moveram, entraram ou saíram. Nunca use o índice do vetor como chave em listas animadas.
<li v-for="item in items" :key="item.id">{{ item.text }}</li>Classes de entrada e saída
O TransitionGroup usa as mesmas classes de entrada e saída que o componente de transição. Defina-as para controlar a aparência e a remoção de cada item.
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}
.list-enter-active,
.list-leave-active {
transition: all 0.3s ease;
}A classe especial de movimento
O recurso de destaque é a classe -move, como list-move. Quando os itens são reordenados, o Vue anima suavemente cada um até sua nova posição usando uma transição de transformação.
.list-move {
transition: transform 0.4s ease;
}A técnica FLIP
Por trás de -move está o FLIP: primeiro registre a posição antiga, depois leia a nova posição, inverta o movimento com uma transformação para que o item pareça não ter se movido e, por fim, reproduza a animação removendo a transformação. O Vue faz isso automaticamente.
/* Vue computes: translate(oldX - newX) then animates to 0 */Itens que saem precisam de posicionamento absoluto
Um elemento que está sendo removido ainda ocupa espaço, o que pode prejudicar a animação de movimento dos elementos vizinhos. Defina position: absolute na classe leave-active para retirar os itens que saem do fluxo do layout.
.list-leave-active {
position: absolute;
}Exemplo de lista ordenável
Combine as classes de entrada, saída e movimento, e o Vue animará a inserção, a remoção e a reorganização ao mesmo tempo.
function shuffle() {
items.value = items.value
.slice()
.sort(() => Math.random() - 0.5);
}Efeito escalonado com transitionDelay
Para fazer os itens aparecerem um após o outro, associe uma transition-delay embutida com base no índice do item. Cada item espera um pouco mais que o anterior.
<li
v-for="(item, i) in items"
:key="item.id"
:style="{ transitionDelay: i * 50 + 'ms' }"
>
{{ item.text }}
</li>Efeito escalonado com ganchos de JS
Para criar um efeito escalonado orientado por dados, você também pode usar os ganchos de JS e um atributo de índice, atrasando cada onEnter de acordo com o índice do elemento.
function onEnter(el, done) {
const delay = el.dataset.index * 50;
setTimeout(() => {
el.style.opacity = 1;
done();
}, delay);
}Observações sobre desempenho
O FLIP anima transform, que é adequado para a GPU. Mantenha as listas em um tamanho razoável e prefira transformação e opacidade a propriedades que acionam o layout, como largura ou posição vertical, para obter um movimento suave a 60 quadros por segundo.
Verificação rápida
O que a classe list-move possibilita?
Recapitulação
Você aprendeu a usar <TransitionGroup> para listas: renderizar um contêiner com tag, dar a cada item uma :key exclusiva, usar classes de entrada e saída junto com a classe -move para animações de reordenação baseadas em FLIP, posicionar absolutamente os itens que saem e criar efeitos escalonados com transitionDelay baseado no índice.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “TransitionGroup para animações de listas” é grátis?
Sim — o texto completo de “TransitionGroup para animações de listas” é 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 “TransitionGroup para animações de listas”?
Animação de listas v-for, transições de movimento e animações escalonadas com atraso. 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 4 de 4.
Quanto tempo leva a aula “TransitionGroup para animações de listas”?
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
- O componente Transition
- Transições e animações CSS
- Hooks de transição em JavaScript
- TransitionGroup para animações de listas