Animazioni con il framework Vue.js

Benvenuti in questa guida dove imparerete come creare animazioni con il framework Vue.js in modo semplice.
Premetto che in questa guida non ci occuperemo dell’elemento <transition> di Vue.js ma, come suggerisce il titolo, ci occuperemo unicamente di creare animazioni con il Vue.js in modo semplicissimo.
Partiamo subito.
La situazione è questa: abbiamo un titolo (un <h1>) e vogliamo che alla pressione di un bottone parta un animazione che renderà il titolo di colore arancione.
Durata dell’animazione? 1 secondo.
Ecco quindi il nostro HTML:

<button  @click="titoloAttivo = !titoloAttivo">Attiva titolo</button>
<h1 class="Titolo" v-bind:class="{Attivo: titoloAttivo}">Titolo bellissimo</h1>

Le cose a cui dovete prestare attenzione sono tre:

• Alla pressione del bottone la variabile del Vue.js “titoloAttivo” si inverte, se è true diventa false e viceversa.
• Il titolo possiede fin da subito la classe “Titolo” che definisce i suoi stili di base più la proprietà transition (che vedremo a breve nel CSS)
• Il titolo possiede la classe “Attivo” se la variabile “titoloAttivo” è vera, altrimenti non possiede la classe.

Vediamo ora il codice JavaScript

export default {
  name: 'app',
  data ()
  {
    return {
      titoloAttivo: false
    };
  },
  computed:
  {
  },
  methods:
  {
  }
}

Come vedete non abbiamo fatto nient’altro che definire nei data la variabile “titoloAttivo”.
Passiamo al CSS:

.Titolo
{
        transition: 1s ease-in-out; /* Definisco le animazioni dureranno un secondo e avranno un andamento non lineare */
        color: black;
}
.Attivo
{
        color: orange;
}

Come vedete è semplicissimo.
La classe “Titolo” definisce il colore standard e la durata di possibili animazioni.
La classe “Attivo” definisce il colore che si applica quando la classe stessa (“Attivo” appunto) viene aggiunta all’elemento.
In questo caso il titolo si colora progressivamente di arancione.
Volendo si può usare la proprietà transform per creare anche animazioni più complesse, tipo ingrandire di 1.5 volte l’elemento

.Titolo
{
        transition: 1s ease-in-out; /* Definisco le animazioni dureranno un secondo e avranno un andamento non lineare */
        color: black;
}
.Attivo
{
        color: orange;
        transform: scale(1.5, 1.5);
}

Possiamo anche creare un’animazione di movimento, come spostare il titolo di 500px verso destra:

.Titolo
{
        transition: 1s ease-in-out; /* Definisco le animazioni dureranno un secondo e avranno un andamento non lineare */
        color: black;
}
.Attivo
{
        color: orange;
        transform: translateX(500px);
}

Il principio è sempre lo stesso: si definisce la proprietà “transition” nella classe predefinita in modo che quando vengono aggiunte altre classi l’elemento di “anima” per avere le proprietà della nuova classe aggiunta.
Per muovere e ridimensionare l’elemento si usa la proprietà “transform”.
 
Spero vi sia utile.
Perché non dai un’occhiata anche a dove imparare il Vue.js?