Le transizioni e le animazioni svolgono un ruolo importante nell'esperienza dell'utente. Aggiungendo sottili animazioni e transizioni tra gli elementi sulla pagina Web, puoi migliorare l'esperienza dell'utente. Il sito web sembrerà molto più fluido, più coinvolgente e generalmente migliore in tutto.

Questo tutorial mostra come implementare transizioni e animazioni in Vue.js. Imparerai come creare sia transizioni semplici che animazioni complesse utilizzando il transizione componenti e fotogrammi chiave CSS.

Il componente di transizione Vue.js

Vue.js ha un built-in transizione componente che ti consente di creare animazioni nella tua app. Questo componente avvolge l'elemento di destinazione che vogliamo animare.

Qui il componente di transizione avvolge l'intestazione di livello uno:

 Ciao </h1>
</transition>

Quando avvolgi un elemento con il transizione component, il componente applicherà le classi di transizione all'elemento che avvolge. Ci sono sei classi di transizione in totale. Tre controllano l'animazione dell'elemento quando entra nella pagina. Gli altri tre controllano l'animazione dell'elemento mentre lascia la pagina.

Il codice utilizzato in questo articolo è disponibile in this Deposito GitHub ed è gratuito per l'uso con la licenza MIT.

Applicazione di classi di transizione quando gli elementi entrano nella pagina

Durante il processo dell'elemento che entra nel DOM, il transizione componente applica le classi entra-da, entra-a, E entra-attivo ad esso. Queste classi ti consentono di controllare come l'elemento si animerà o transiterà sulla pagina.

• entra-da: applicato all'elemento prima che entri in un browser. Si utilizza questa classe per impostare lo stato CSS iniziale dell'elemento.
• entra-a: applicato all'elemento quando entra nel browser. Si utilizza questa classe per impostare lo stato CSS finale dell'elemento.
• entra-attivo: applicato mentre l'elemento sta passando da uno stato all'altro. Qui è dove stabilisci quanto tempo impiegherà la transizione.

Vediamo un esempio:

<transizione>
 <h1> Ciaoh1>
transizione>
.enter-da {
opacità: 0;
}
.enter-to {
opacità: 1;
}
.enter-attivo {
transizione: opacità 2Ssollievo;
}

Con questo codice, l'intestazione di livello uno impiega due secondi per passare da invisibile (opacità: 0) a completamente visibile (opacità: 1). Questa transizione avviene quando l'elemento entra nel DOM. Senza la transizione, il testo sarebbe apparso immediatamente sul browser una volta caricata la pagina.

Applicazione di classi di transizione quando gli elementi lasciano la pagina

IL transizione component supporta altre tre classi di transizione che devi applicare quando l'elemento lascia il DOM. I loro nomi sono partire da, lasciare, E lasciare attivo. Queste classi controllano come l'elemento si animerà o transiterà dalla pagina.

Come avrai intuito, queste classi sono simili alle accedere- classi di cui abbiamo discusso in precedenza. Ma queste classi vengono attivate solo quando l'elemento sta per essere smontato dal DOM. Il montaggio e lo smontaggio sono concetti importanti del DOM. Come sviluppatore, dovresti avere un file conoscenza di base del DOM e altri concetti correlati.

Vediamo un esempio:

<transizione>
 <h1> Ciaoh1>
transizione>
.partire da {
opacità: 0;
}
.lasciare {
opacità: 1;
}
.lasciare attivo {
transizione: opacità 2Ssollievo;
}

In questo caso, l'intestazione di livello uno impiega due secondi per passare lentamente da visibile (opacità: 1) a invisibile (opacità: 0). Questa transizione avviene quando l'elemento lascia il DOM. Senza la transizione, il testo sarebbe scomparso istantaneamente dal browser.

Uso dei nomi di transizione

Puoi anche aggiungere un nome attributo al componente di transizione. Quando lo fai, Vue aggiungerà il nome alle tue classi di transizione. Ciò significa che puoi avere più transizioni sulla tua pagina, ognuna con classi di transizione e proprietà CSS univoche.

Ad esempio, se imposti il ​​nome dissolvenza sul tuo componente di transizione, tutte le classi di transizione saranno precedute da dissolvenza:

<transizionenome ="dissolvenza">
 <h1> Ciaoh1>
transizione>
.fade-enter-from {
opacità: 1;
}
.fade-congedo-da {
opacità: 1;
}
// altro "accedere" E "Partire" classiconILdissolvenzaCOMEprefisso

Creazione di transizioni utilizzando il componente di transizione

Per dimostrare la transizione in Vue.js, avvolgerai an H1 all'interno del transizione componente. Sotto, creerai un pulsante. Quando si fa clic su questo pulsante, la variabile viene commutata mostra titolo fra falso E VERO.

Ecco il codice:

Quindi, definisci il file copione sezione. Questa sezione contiene il impostare metodo in cui si inizializza il file mostra titolo variabile con falso.