Como criar animações e transições em Vue.js

Melhore a aparência do seu aplicativo Vue adicionando animações.

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

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

O componente de transição Vue.js

Vue.js possui um componente de transição integrado que permite criar animações em seu aplicativo. Este componente envolve o elemento alvo que queremos animar.

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

<transition>
  <h1> Hello </h1>
</transition>

Quando você agrupa um elemento com o componente transição, o componente aplicará classes de transição ao elemento que ele encapsula. Existem 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.

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

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

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

Vejamos um exemplo:

<transition>
  <h1> Hello </h1>
</transition>
.enter-from {
  opacity: 0;
}
.enter-to {
  opacity: 1;
}
.enter-active {
  transition: opacity 2s ease;
}

Com esse código, o cabeçalho de nível um leva dois segundos para fazer a transição de invisível (opacidade: 0) para 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 carregasse.

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

O componente transition suporta três outras classes de transição que você precisa aplicar quando o elemento estiver saindo do DOM. Seus nomes são deixar, deixar para e deixar ativo. Essas classes controlam como o elemento será animado ou transitará da página.

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

Vejamos um exemplo:

<transition>
  <h1> Hello </h1>
</transition>
.leave-from {
  opacity: 0;
}
.leave-to {
  opacity: 1;
}
.leave-active {
transition: opacity 2s ease;
}

Nesse caso, o cabeçalho de nível um leva dois segundos para fazer a transição lenta 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 instantaneamente do navegador.

Usando nomes de transição

Você também pode adicionar um atributo nome ao seu componente de transição. Quando você fizer isso, o Vue acrescentará 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 fade em seu componente de transição, todas as classes de transição serão prefixadas com fade:

<transition name ="fade">
  <h1> Hello </h1>
</transition>
.fade-enter-from {
  opacity: 1;
}
.fade-leave-from {
  opacity: 1;
}
// other "enter" and "leave" classes with the fade as prefix

Criando Transições Usando o Componente de Transição

Para demonstrar a transição no Vue.js, você envolverá um H1 dentro do componente transição. Abaixo de , você criará um botão. Quando este botão é clicado, ele alterna a variávelshowTitle entre false e true.

Aqui está o código:

<template>
  <transition name="fade">
    <h1 v-if="showTitle"> Hey People </h1>
  </transition>
  <button @click="showTitle = !showTitle"> Toggle </button>
</template>

A seguir, defina a seção script. Esta seção contém o método setup onde você inicializa a variável showTitle com false.

<script>
import {ref} from 'vue'
export default {
  name: "App",
  setup() {
    const showTitle = ref(false)
    return {showTitle}
  } 
};
</script>

Agora você deve ver o texto e o botão no seu navegador:

Se você clicar duas vezes no botão, o texto aparecerá e depois desaparecerá. Mas não haverá transição entre os dois estados. Vamos adicionar a transição dentro da seção de estilos:

<style>
.fade-enter-from {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-enter-active {
  transition: opacity 2s ease;
}
.fade-leave-from {
  opacity: 1
}
.fade-leave-to {
  opacity: 0
}
.fade-leave-active {
  transition: opacity 2s ease;
}
</style>

Quando o botão é clicado inicialmente, você está fazendo a transição do H1 de opaco para visível usando as classes .enter. Mas quando o botão é clicado novamente, você usa as classes .leave para fazer a transição do H1 de visível para invisível.

Ambos os conjuntos de transições levam dois segundos e aparecem e desaparecem gradualmente. Você também pode ver que o nome fade é anexado a todos os nomes de classes. Se você não fizer isso, o código não funcionará.

Criando animações complexas com quadros-chave CSS

Às vezes você gostaria que sua animação fosse um pouco mais complexa. A maneira como você faria isso no Vue.js é criando animações de quadros-chave CSS. Confira nosso guia detalhado de animação de quadros-chave CSS se estiver interessado em aprender mais.

Como exemplo, vamos ver um exemplo de animação de oscilação. Esta animação balança o H1 da esquerda para a direita (e vice-versa) conforme ele entra na página. O seguinte CCS cria uma animação oscilante com a diretiva @keyframes:

@keyframes wobble {
 0% { transform: translateY(-60px); opacity: 0}
 50% {transform: translateY(0px); opacity: 1}
 60% {transform: translateX(8px);}
 70% {transform: translateX(-8px);}
 80% {transform: translateX(4px);}
 90% {transform: translateX(-4px);}
 100% {transform: translateX(0px);}
}

No início da animação, o H1 ficará oculto. Na metade da animação (50%), o H1 ficará totalmente visível. Então, nas etapas subsequentes da animação, movemos o texto para a esquerda e para a direita. Isso dá um efeito instável.

Isso aplica a animação ao elemento conforme ele entra na página:

.fade-enter-active {
  animation: wobble 0.5s ease;
}

Neste caso, a animação durará meio segundo.

Aprenda sobre acessibilidade em Vue.js

Enfatizamos como as transições e animações podem melhorar a experiência do usuário. Outro aspecto importante da experiência do usuário é tornar seu aplicativo mais acessível. Nem todos os usuários são iguais. Alguns podem ter deficiências que dificultam o consumo do conteúdo do seu site. Portanto, é importante tornar seu site acessível também.