Prehodi in animacije igrajo pomembno vlogo pri uporabniški izkušnji. Z dodajanjem subtilnih animacij in prehodov med elementi na spletni strani lahko izboljšate uporabniško izkušnjo. Spletna stran se bo zdela veliko bolj tekoča, privlačnejša in na splošno boljša.

Ta vadnica prikazuje, kako implementirati prehode in animacije v Vue.js. Naučili se boste ustvariti preproste prehode in zapletene animacije z uporabo prehod komponente in ključni okvirji CSS.

Prehodna komponenta Vue.js

Vue.js ima vgrajeno prehod komponento, ki vam omogoča ustvarjanje animacij v vaši aplikaciji. Ta komponenta se ovije okoli ciljnega elementa, ki ga želimo animirati.

Tukaj prehodna komponenta ovije glavo prve stopnje:

 Pozdravljeni </h1>
</transition>

Ko ovijete element z prehod bo komponenta uporabila prehodne razrede za element, ki ga ovije. Skupaj je šest prehodnih razredov. Tri nadzorujejo animacijo elementa, ko vstopi na stran. Ostali trije nadzorujejo animacijo elementa, ko ta zapusti stran.

Koda, uporabljena v tem članku, je na voljo tukaj Repozitorij GitHub in je brezplačen za uporabo pod licenco MIT.

Uporaba prehodnih razredov, ko element vstopi na stran

Med procesom vstopa elementa v DOM se prehod komponenta uporablja razrede vstopiti-iz, vstopiti v, in enter-aktiven temu. Ti razredi vam omogočajo nadzor nad tem, kako se bo element animiral ali prešel na stran.

• vstopiti-iz: Uporabi se za element, preden vstopi v brskalnik. Ta razred uporabite za nastavitev začetnega stanja CSS elementa.
• vstopiti v: Uporabi se za element, ko vstopi v brskalnik. Ta razred uporabite za nastavitev končnega stanja CSS elementa.
• enter-aktiven: Uporabljeno, ko element prehaja iz enega stanja v drugo. Tukaj narekujete, kako dolgo bo trajal prehod.

Poglejmo primer:

<prehod>
 <h1> zdravoh1>
prehod>
.vstop-od {
nepreglednost: 0;
}
.enter-to {
nepreglednost: 1;
}
.enter-active {
prehod: nepreglednost 2senostavnost;
}

S to kodo glava prve stopnje potrebuje dve sekundi za prehod iz nevidnega (motnost: 0) v celoti viden (motnost: 1). Ta prehod se zgodi, ko element vstopi v DOM. Brez prehoda bi se besedilo takoj pojavilo v brskalniku, ko se stran naloži.

Uporaba prehodnih razredov, ko elementi zapustijo stran

The prehod komponenta podpira tri druge prehodne razrede, ki jih morate uporabiti, ko element zapušča DOM. Njihova imena so dopust-iz, prepustiti, in dopust-aktiven. Ti razredi nadzorujejo, kako bo element animiral ali prešel s strani.

Kot ste morda uganili, so ti razredi podobni vnesite- razrede, o katerih smo razpravljali prej. Vendar se ti razredi aktivirajo le, ko se bo element odklopil iz DOM-a. Montaža in demontaža sta pomembna pojma DOM. Kot razvijalec bi morali imeti osnovno razumevanje DOM in drugi povezani pojmi.

Poglejmo primer:

<prehod>
 <h1> zdravoh1>
prehod>
.zapustiti-od {
nepreglednost: 0;
}
.prepustiti {
nepreglednost: 1;
}
.pusti-aktiven {
prehod: nepreglednost 2senostavnost;
}

V tem primeru glava prve stopnje potrebuje dve sekundi, da počasi preide iz vidne (motnost: 1) v nevidno (motnost: 0). Ta prehod se zgodi, ko element zapusti DOM. Brez prehoda bi besedilo takoj izginilo iz brskalnika.

Uporaba imen prehodov

Dodate lahko tudi a ime atribut vaši prehodni komponenti. Ko to storite, bo Vue dodal ime vašim prehodnim razredom. To pomeni, da imate lahko na svoji strani več prehodov, vsak z edinstvenimi razredi prehodov in lastnostmi CSS.

Na primer, če nastavite ime zbledi na vaši prehodni komponenti, potem bodo vsi prehodni razredi imeli predpono zbledi:

<prehodime ="zbledi">
 <h1> zdravoh1>
prehod>
.fade-enter-from {
nepreglednost: 1;
}
.fade-leave-from {
nepreglednost: 1;
}
// drugo "vstopiti" in "zapustiti" razredizthezbledikotpredpono

Ustvarjanje prehodov z uporabo komponente prehoda

Če želite prikazati prehod v Vue.js, boste zavili an H1 znotraj prehod komponento. Spodaj, boste ustvarili gumb. Ko kliknete ta gumb, preklopite spremenljivko showTitle med lažno in prav.

Tukaj je koda:

Nato definirajte scenarij razdelek. Ta razdelek vsebuje nastaviti način, kjer inicializirate showTitle spremenljivka z lažno.