Transições e animações desempenham um papel importante na experiência do usuário. Ao adicionar animações e transições sutis entre elementos na página da web, você pode aprimorar a experiência do usuário. O site parecerá muito mais suave, mais envolvente e melhor em geral.

Este tutorial demonstra como implementar transições e animações no Vue.js. Você aprenderá como criar transições simples e animações complexas usando o transição componentes e quadros-chave CSS.

O componente de transição Vue.js

Vue.js tem um built-in transição componente que permite criar animações em seu aplicativo. Este componente envolve o elemento de destino que queremos animar.

Aqui, o componente de transição envolve o cabeçalho de nível um:

 Olá </h1>
</transition>

Quando você envolve um elemento com o transição componente, o componente aplicará classes de transição ao elemento que ele envolve. Há seis classes de transição no total. Três controlam a animação do elemento conforme ele entra na página. Os outros três controlam a animação do elemento conforme ele sai da página.

O código usado neste artigo está disponível neste Repositório GitHub e é gratuito para você usar sob a licença do MIT.

Aplicando classes de transição quando elementos entram na página

Durante o processo de entrada do elemento no DOM, o transição componente aplica as classes entrada de, Entrar para, e enter-ativo para isso. Essas classes permitem que você controle como o elemento será animado ou transitado na página.

• entrada de: aplicado ao elemento antes de entrar em um navegador. Você usa essa classe para definir o estado CSS inicial do elemento.
• Entrar para: aplicado ao elemento conforme ele entra no navegador. Você usa essa classe para definir o estado CSS final do elemento.
• enter-ativo: Aplicado enquanto o elemento está em transição de um estado para outro. É aqui que você determina quanto tempo a transição levará.

Vejamos um exemplo:

<transição>
 <h1> Oláh1>
transição>
.enter-from {
opacidade: 0;
}
.Entrar para {
opacidade: 1;
}
.enter-active {
transição: opacidade 2sfacilidade;
}

Com esse código, o cabeçalho de nível um leva dois segundos para passar de invisível (opacidade: 0) a totalmente visível (opacidade: 1). Essa transição acontece quando o elemento entra no DOM. Sem a transição, o texto teria aparecido imediatamente no navegador assim que a página fosse carregada.

Aplicando classes de transição quando os elementos saem da página

O transição O componente suporta três outras classes de transição que você precisa aplicar quando o elemento está saindo do DOM. Os nomes deles são partir de, deixar para, e licença ativa. Essas classes controlam como o elemento será animado ou transitará da página.

Como você deve ter adivinhado, essas classes são semelhantes às digitar- classes que discutimos anteriormente. Mas essas classes só são ativadas quando o elemento está prestes a desmontar do DOM. Montar e desmontar são conceitos importantes do DOM. Como desenvolvedor, você deve ter um compreensão básica do DOM e outros conceitos relacionados.

Vejamos um exemplo:

<transição>
 <h1> Oláh1>
transição>
.partir de {
opacidade: 0;
}
.deixar para {
opacidade: 1;
}
.deixar-ativo {
transição: opacidade 2sfacilidade;
}

Nesse caso, o cabeçalho de nível um leva dois segundos para passar lentamente de visível (opacidade: 1) para invisível (opacidade: 0). Essa transição acontece quando o elemento sai do DOM. Sem a transição, o texto teria desaparecido do navegador instantaneamente.

Usando nomes de transição

Você também pode adicionar um nome atributo ao seu componente de transição. Quando você fizer isso, o Vue anexará o nome às suas classes de transição. Isso significa que você pode ter várias transições em sua página, cada uma com classes de transição e propriedades CSS exclusivas.

Por exemplo, se você definir o nome desaparecer em seu componente de transição, todas as classes de transição serão prefixadas com desaparecer:

<transiçãonome ="desaparecer">
 <h1> Oláh1>
transição>
.fade-enter-from {
opacidade: 1;
}
.fade-leave-from {
opacidade: 1;
}
// outro "digitar" e "deixar" Aulascomodesaparecercomoprefixo

Criando transições usando o componente de transição

Para demonstrar a transição no Vue.js, você envolverá um H1 dentro do transição componente. Debaixo de, você criará um botão. Quando este botão é clicado, ele alterna a variável showTitle entre falso e verdadeiro.

Aqui está o código:

A seguir, defina o roteiro seção. Esta seção contém o configurar método onde você inicializa o showTitle variável com falso.