Italiano

Tutorial VueJS

VueJS - Transizione e Animazione

Introduzione

Ciao futuro mago di Vue.js! ? Sono entusiasta di essere il tuo guida in questo emozionante viaggio attraverso il magico mondo delle transizioni e delle animazioni in Vue.js. Come qualcuno che ha insegnato scienze informatiche per anni, posso dirti che aggiungere transizioni fluide e animazioni accattivanti alle tue applicazioni web è come aggiungere zuccherini a una torta - rende tutto più delizioso!

VueJS - Transition & Animation

Ora, non preoccuparti se sei nuovo alla programmazione. Inizieremo dalle basi e lavoreremo fino ad arrivare a livelli più avanzati. Alla fine di questo tutorial, sarai in grado di creare animazioni che faranno dire ai tuoi amici: "Wow, come hai fatto ذلك?" Allora, entriamo nel dettaglio!

Transizione

Cos'è una Transizione?

Nel mondo dello sviluppo web, una transizione è come un cambiamento fluido da uno stato all'altro. Immagina un interruttore della luce che non si accende e si spegne bruscamente, ma invece si illumina o si oscura gradualmente. Questo è l'essenza di una transizione!

Esempio di Transizione Base

Iniziamo con un esempio semplice. Creeremo un pulsante che, quando viene cliccato, mostra o nasconde un messaggio con un effetto di dissolvenza fluido.

<template>
<div>
<button @click="show = !show">Toggle</button>
<transition name="fade">
<p v-if="show">Ciao, sono un messaggio in transizione!</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>

Analizziamo questo esempio:

  1. Abbiamo un pulsante che toggle la variabile show quando viene cliccato.
  2. Il componente <transition> avvolge il nostro messaggio, con l'attributo name impostato su "fade".
  3. La direttiva v-if sul paragrafo lo mostra o lo nasconde in base alla variabile show.
  4. Nella sezione <style>, definiamo le nostre classi di transizione:
  • .fade-enter-active e .fade-leave-active impostano la durata della transizione a 0.5 secondi.
  • .fade-enter e .fade-leave-to impostano l'opacità iniziale e finale a 0 (invisibile).

Quando clicchi il pulsante, il messaggio apparirà e scomparirà in modo fluido. Non è fantastico?

Animazione

Qual è la Differenza tra Transizione e Animazione?

Mentre le transizioni sono ottime per cambi di stato semplici, le animazioni permettono effetti più complessi e multi-fase. Se una transizione è come una luce che si oscura gradualmente, un'animazione è come uno spettacolo di luci con molti colori e modelli!

Esempio di Animazione Base

Creiamo un'animazione di una palla che salta:

<template>
<div>
<button @click="show = !show">Bounce!</button>
<transition name="bounce">
<p v-if="show">?</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
.bounce-enter-active {
animation: bounce-in 0.5s;
}
.bounce-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
</style>

In questo esempio:

  1. Utilizziamo lo stesso meccanismo di toggle del pulsante come prima.
  2. Il componente <transition> ora ha il nome "bounce".
  3. Nella sezione <style>, definiamo:
  • .bounce-enter-active applica l'animazione bounce-in.
  • .bounce-leave-active applica la stessa animazione al contrario.
  • La regola @keyframes definisce la nostra animazione bounce-in con tre fasi.

Quando clicchi il pulsante, la palla apparirà con un effetto di rimbalzo e scomparirà con un rimbalzo inverso. Divertente, vero?

Classi di Transizione Personalizzate

Vue.js ci offre la flessibilità di utilizzare classi CSS personalizzate per le nostre transizioni. Questo è molto utile quando si vuole utilizzare librerie CSS di animazione di terze parti come Animate.css.

Ecco come puoi utilizzare le classi personalizzate:

<template>
<div>
<button @click="show = !show">Animate!</button>
<transition
enter-active-class="animated fadeInDown"
leave-active-class="animated fadeOutUp"
>
<p v-if="show">? Verso l'infinito e oltre!</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
/* Supponiamo di aver importato Animate.css qui */
</style>

In questo esempio, stiamo utilizzando le classi di Animate.css direttamente nel nostro componente <transition>. Gli attributi enter-active-class e leave-active-class ci permettono di specificare classi personalizzate per le animazioni di entrata e uscita.

Durata Esplicita della Transizione

A volte, potresti voler impostare esplicitamente quanto deve durare una transizione o un'animazione. Vue.js ti permette di fare questo con la proprietà :duration:

<template>
<div>
<button @click="show = !show">Slow Motion</button>
<transition :duration="1000">
<p v-if="show">Sto muovendo in slow motion...</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
.v-enter-active, .v-leave-active {
transition: all 1s;
}
.v-enter, .v-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>

Qui, impostiamo la durata a 1000 millisecondi (1 secondo) per entrambe le transizioni di entrata e uscita. Puoi anche impostare durate diverse per l'entrata e l'uscita:

<transition :duration="{ enter: 500, leave: 800 }">
<!-- ... -->
</transition>

Hook JavaScript

Per un controllo ancora maggiore sulle tue transizioni, Vue.js offre hook JavaScript. Questi sono come piccoli assistenti che ti permettono di eseguire codice in punti specifici durante una transizione.

Ecco un esempio:

<template>
<div>
<button @click="show = !show">Animate</button>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
>
<p v-if="show">? Sono controllato da JavaScript!</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
},
methods: {
beforeEnter(el) {
console.log('Prima dell\'entrata');
},
enter(el, done) {
console.log('During enter');
done();
},
afterEnter(el) {
console.log('Dopo l\'entrata');
},
enterCancelled(el) {
console.log('Entrata annullata');
},
beforeLeave(el) {
console.log('Prima dell\'uscita');
},
leave(el, done) {
console.log('During leave');
done();
},
afterLeave(el) {
console.log('Dopo l\'uscita');
},
leaveCancelled(el) {
console.log('Uscita annullata');
}
}
}
</script>

Questi hook ti danno un controllo preciso sul processo di transizione. Puoi usarli per innescare altre animazioni, aggiornare dati o eseguire qualsiasi altra azione in punti specifici durante la transizione.

Transizione all'Initial Render

Per impostazione predefinita, le transizioni in Vue.js si verificano solo quando un elemento viene inserito o rimosso dal DOM. Ma cosa succede se vuoi che un elemento transizioni durante il rendering iniziale? Vue.js ha una soluzione con l'attributo appear:

<template>
<div>
<transition appear>
<p>? Apparo con una transizione!</p>
</transition>
</div>
</template>

<style>
.v-enter-active {
transition: all .3s ease;
}
.v-enter {
opacity: 0;
transform: translateY(-20px);
}
</style>

Con l'attributo appear, l'elemento transizzerà quando il componente viene渲染izzato per la prima volta.

Animazione sui Componenti

Ultimo ma non meno importante, parliamo di animare i componenti. La buona notizia è che puoi utilizzare tutte le funzionalità di transizione che abbiamo discusso anche sui tuoi componenti personalizzati!

<template>
<div>
<button @click="toggleComponent">Switch Component</button>
<transition name="fade" mode="out-in">
<component :is="currentComponent"></component>
</transition>
</div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
components: {
ComponentA,
ComponentB
},
data() {
return {
currentComponent: 'ComponentA'
}
},
methods: {
toggleComponent() {
this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
}
}
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>

In questo esempio, stiamo alternando tra due componenti con una transizione di dissolvenza. L'attributo mode="out-in" garantisce che il vecchio componente transizioni fuori prima che il nuovo transizioni dentro.

Conclusione

Wow, abbiamo coperto molto terreno! Dalle transizioni di base alle animazioni complesse, dalle classi personalizzate ai hook JavaScript, e persino le animazioni sui componenti. Ricorda, la chiave per padroneggiare questi concetti è la pratica. Quindi vai avanti, esperimenta con questi esempi, mescola e combina diverse tecniche, e, soprattutto, divertiti!

Le animazioni e le transizioni possono davvero portare le tue applicazioni Vue.js alla vita. Non sono solo questioni di aspetto (anche se è certamente un plus!) - possono anche migliorare l'esperienza utente fornendo feedback visivo e guidando gli utenti attraverso la tua applicazione.

Continua a esplorare, continua a creare, e prima di sapere, sarai il guru delle animazioni nel tuo team di sviluppo. Buon coding, futuri maestri di Vue.js! ?✨

Metodo Descrizione
transition Avvolge un elemento o un componente per applicare transizioni di entrata/uscita
animation Definisce un'animazione riutilizzabile che può essere applicata agli elementi
enter-active-class Specifica una classe CSS personalizzata per la transizione di entrata
leave-active-class Specifica una classe CSS personalizzata per la transizione di uscita
:duration Imposta la durata di una transizione
@before-enter Hook JavaScript chiamato prima che inizi la transizione di entrata
@enter Hook JavaScript chiamato quando inizia la transizione di entrata
@after-enter Hook JavaScript chiamato dopo che è terminata la transizione di entrata
@enter-cancelled Hook JavaScript chiamato quando la transizione di entrata è annullata
@before-leave Hook JavaScript chiamato prima che inizi la transizione di uscita
@leave Hook JavaScript chiamato quando inizia la transizione di uscita
@after-leave Hook JavaScript chiamato dopo che è terminata la transizione di uscita
@leave-cancelled Hook JavaScript chiamato quando la transizione di uscita è annullata
appear Applica una transizione durante il rendering iniziale di un elemento
mode Specifica il timing delle transizioni di uscita/entrata

Credits: Image by storyset

Tutorial precedente:
VueJS - Rendering
Prossimo tutorial:
VueJS - Direttive