Aprende Vue

Capítulo 10. Transição e animação em Vue

Este trabalho foi traduzido com recurso a IA. Agradecemos o teu feedback e comentários: [e-mail]

Explorámos todos os aspectos cruciais da construção de uma aplicação Vue funcional, incluindo o tratamento de rotas e o fluxo de dados com uma gestão de estado adequada. Este capítulo irá explorar uma caraterística única do Vue para melhorar a experiência do utilizador: animação e transições, utilizando componentes de transição, hooks e CSS.

Compreender as transições CSS e as animações CSS

As animações CSS são os efeitos visuais de uma mudança de estado num elemento ou componente específico, sem limite do número de estados. Uma animação CSS pode iniciar-se automaticamente e entrar em loop sem ser explicitamente activada. Em contraste, a transição CSS é uma animação que responde apenas a uma mudança entre dois estados, de médio para pairado para um botão ou de oculto para visível para uma dica de ferramenta. Para definir uma animação CSS, utilizamos frequentemente a regra @keyframes e, em seguida, aplicamo-la ao elemento de destino utilizando a propriedadeanimation propriedade. Por exemplo, podemos definir um efeito de animação simples para umbotão :

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

.button {
  animation: pulse 2s infinite;
  box-shadow: 0px 0px 1px 1px #0000001a;
}

Definimos um efeito de animação simples, pulse, e aplicámo-lo a qualquer ...