Tranzițiile și animațiile joacă un rol important în experiența utilizatorului. Adăugând animații subtile și tranziții între elemente de pe pagina web, puteți îmbunătăți experiența utilizatorului. Site-ul web va părea mult mai fluid, mai captivant și, în general, mai bun pe tot parcursul.

Acest tutorial demonstrează cum să implementați tranziții și animații în Vue.js. Veți învăța cum să creați atât tranziții simple, cât și animații complexe folosind tranziție componentă și cadre cheie CSS.

Componenta de tranziție Vue.js

Vue.js are un sistem încorporat tranziție componentă care vă permite să creați animații în aplicația dvs. Această componentă se înfășoară în jurul elementului țintă pe care dorim să-l animam.

Aici componenta de tranziție cuprinde antetul de nivel unu:

 Buna ziua </h1>
</transition>

Când înfășurați un element cu tranziție componentă, componenta va aplica clase de tranziție elementului pe care îl înfășoară. Există șase clase de tranziție în total. Trei controlează animația elementului pe măsură ce intră în pagină. Celelalte trei controlează animația elementului pe măsură ce părăsește pagina.

Codul folosit în acest articol este disponibil în acest articol Depozitul GitHub și este gratuit pentru utilizare sub licența MIT.

Aplicarea claselor de tranziție când elementele intră în pagină

În timpul procesului de intrare a elementului în DOM, tranziție componenta aplica clasele intra-din, intra-la, și enter-activ la el. Aceste clase vă permit să controlați modul în care elementul va anima sau trece pe pagină.

• intra-din: aplicat elementului înainte de a intra într-un browser. Folosiți această clasă pentru a seta starea inițială CSS a elementului.
• intra-la: Se aplică elementului pe măsură ce intră în browser. Utilizați această clasă pentru a seta starea CSS finală a elementului.
• enter-activ: Se aplică în timp ce elementul trece de la o stare la alta. Aici dictezi cât timp va dura tranziția.

Să vedem un exemplu:

<tranziție>
 <h1> Buna ziuah1>
tranziție>
.intra-din {
opacitate: 0;
}
.intra-la {
opacitate: 1;
}
.intra-activ {
tranziție: opacitate 2suşura;
}

Cu acest cod, antetul de nivel unu durează două secunde pentru a trece de la invizibil (opacitate: 0) să fie complet vizibil (opacitate: 1). Această tranziție are loc atunci când elementul intră în DOM. Fără tranziție, textul ar fi apărut imediat în browser odată ce pagina se încarcă.

Aplicarea claselor de tranziție când elementele părăsesc pagina

The tranziție componenta acceptă alte trei clase de tranziție pe care trebuie să le aplicați atunci când elementul părăsește DOM. Numele lor sunt a pleca din, lăsați să, și lăsa-activ. Aceste clase controlează modul în care elementul se va anima sau trece din pagină.

După cum probabil ați ghicit, aceste clase sunt similare cu introduce- clasele despre care am discutat mai devreme. Dar aceste clase sunt activate doar atunci când elementul este pe cale să se demonteze din DOM. Montarea și demontarea sunt concepte importante ale DOM. În calitate de dezvoltator, ar trebui să aveți un înțelegerea de bază a DOM și alte concepte înrudite.

Să vedem un exemplu:

<tranziție>
 <h1> Buna ziuah1>
tranziție>
.a pleca din {
opacitate: 0;
}
.lasa-la {
opacitate: 1;
}
.lasi-activ {
tranziție: opacitate 2suşura;
}

În acest caz, antetul de nivel unu durează două secunde pentru a trece lent de la vizibil (opacitate: 1) la invizibil (opacitate: 0). Această tranziție are loc atunci când elementul părăsește DOM. Fără tranziție, textul ar fi dispărut instantaneu din browser.

Utilizarea numelor de tranziție

De asemenea, puteți adăuga un Nume atribuiți componentei dvs. de tranziție. Când faceți acest lucru, Vue va adăuga numele la clasele dvs. de tranziție. Aceasta înseamnă că puteți avea mai multe tranziții pe pagina dvs., fiecare cu clase de tranziție și proprietăți CSS unice.

De exemplu, dacă setați numele decolorare pe componenta dvs. de tranziție, atunci toate clasele de tranziție vor fi prefixate cu decolorare:

<tranzițieNume ="decolorare">
 <h1> Buna ziuah1>
tranziție>
.fade-intra-din {
opacitate: 1;
}
.fade-leave-of {
opacitate: 1;
}
// alte "introduce" și "părăsi" clasecuceldecolorarela fel deprefix

Crearea de tranziții utilizând componenta de tranziție

Pentru a demonstra tranziția în Vue.js, veți încheia un H1 în cadrul tranziție componentă. Dedesubt, veți crea un buton. Când se face clic pe acest buton, comută variabila Arata titlul între fals și Adevărat.

Iată codul:

Apoi, definiți scenariu secțiune. Această secțiune conține înființat metoda prin care inițializați Arata titlul variabilă cu fals.