Prijelazi i animacije igraju veliku ulogu u korisničkom iskustvu. Dodavanjem suptilnih animacija i prijelaza između elemenata na web stranici možete poboljšati korisničko iskustvo. Web stranica će se činiti mnogo glatkijom, privlačnijom i općenito boljom.

Ovaj vodič pokazuje kako implementirati prijelaze i animacije u Vue.js. Naučit ćete kako stvoriti jednostavne prijelaze i složene animacije pomoću tranzicija komponente i CSS ključni okviri.

Prijelazna komponenta Vue.js

Vue.js ima ugrađeni tranzicija komponenta koja vam omogućuje stvaranje animacija u vašoj aplikaciji. Ova komponenta obavija ciljni element koji želimo animirati.

Ovdje prijelazna komponenta obavija zaglavlje razine jedan:

 Pozdrav </h1>
</transition>

Kada omotate element s tranzicija komponenta, komponenta će primijeniti prijelazne klase na element koji obavija. Ukupno je šest prijelaznih razreda. Tri kontroliraju animaciju elementa dok ulazi na stranicu. Ostala tri kontroliraju animaciju elementa dok napušta stranicu.

Kôd korišten u ovom članku dostupan je u ovom GitHub spremište i besplatan je za korištenje pod MIT licencom.

Primjena prijelaznih klasa kada elementi uđu na stranicu

Tijekom procesa ulaska elementa u DOM, tranzicija komponenta primjenjuje klase ući-iz, enter-to, i enter-aktivan na to. Ove klase vam omogućuju kontrolu načina na koji će se element animirati ili prijeći na stranicu.

• ući-iz: Primijenjeno na element prije nego što uđe u preglednik. Ovu klasu koristite za postavljanje početnog CSS stanja elementa.
• enter-to: Primijenjeno na element dok ulazi u preglednik. Ovu klasu koristite za postavljanje konačnog CSS stanja elementa.
• enter-aktivan: Primjenjuje se dok element prelazi iz jednog stanja u drugo. Ovdje vi određujete koliko će prijelaz trajati.

Pogledajmo primjer:

<tranzicija>
 <h1> zdravoh1>
tranzicija>
.ući-iz {
neprozirnost: 0;
}
.ući-u {
neprozirnost: 1;
}
.enter-aktivan {
tranzicija: neprozirnost 2solakšati;
}

S ovim kodom, zaglavlju razine jedan potrebne su dvije sekunde za prijelaz iz nevidljivog (neprozirnost: 0) do potpuno vidljive (neprozirnost: 1). Ovaj prijelaz se događa kada element uđe u DOM. Bez prijelaza, tekst bi se odmah pojavio u pregledniku nakon učitavanja stranice.

Primjena prijelaznih klasa kada elementi napuste stranicu

The tranzicija komponenta podržava tri druge prijelazne klase koje trebate primijeniti kada element napušta DOM. Njihova imena su izaći iz, prepustiti se, i ostavi-aktivan. Ove klase kontroliraju kako će se element animirati ili preći sa stranice.

Kao što ste mogli pretpostaviti, ove su klase slične Unesi- razreda o kojima smo ranije razgovarali. Ali te se klase aktiviraju samo kada se element sprema demontirati iz DOM-a. Montiranje i demontaža su važni koncepti DOM-a. Kao programer, trebali biste imati osnovno razumijevanje DOM-a i druge srodne pojmove.

Pogledajmo primjer:

<tranzicija>
 <h1> zdravoh1>
tranzicija>
.izaći iz {
neprozirnost: 0;
}
.prepustiti {
neprozirnost: 1;
}
.ostavi-aktivan {
tranzicija: neprozirnost 2solakšati;
}

U ovom slučaju, zaglavlju razine jedan potrebne su dvije sekunde za polagani prijelaz iz vidljivog (neprozirnost: 1) do nevidljivog (neprozirnost: 0). Ovaj prijelaz se događa kada element napusti DOM. Bez prijelaza, tekst bi trenutno nestao iz preglednika.

Korištenje naziva prijelaza

Također možete dodati a Ime atribut vašoj prijelaznoj komponenti. Kada to učinite, Vue će dodati naziv vašim prijelaznim klasama. To znači da možete imati više prijelaza na svojoj stranici, svaki s jedinstvenim klasama prijelaza i CSS svojstvima.

Na primjer, ako postavite naziv uvenuti na vašoj prijelaznoj komponenti, tada će sve prijelazne klase imati prefiks uvenuti:

<tranzicijaIme ="uvenuti">
 <h1> zdravoh1>
tranzicija>
.fade-enter-from {
neprozirnost: 1;
}
.izblijediti-napustiti {
neprozirnost: 1;
}
// drugo "Unesi" i "napustiti" klasestheuvenutikaoprefiks

Stvaranje prijelaza pomoću komponente prijelaza

Da biste demonstrirali prijelaz u Vue.js, zamotat ćete H1 unutar tranzicija komponenta. Ispod, stvorit ćete gumb. Kada se klikne na ovaj gumb, mijenja se varijabla showTitle između lažno i pravi.

Evo koda:

Zatim definirajte skripta odjeljak. Ovaj odjeljak sadrži postaviti metoda u kojoj inicijalizirate showTitle varijabla sa lažno.