Pārejām un animācijām ir liela nozīme lietotāja pieredzē. Tīmekļa lapā pievienojot smalkas animācijas un pārejas starp elementiem, varat uzlabot lietotāja pieredzi. Vietne šķitīs daudz gludāka, saistošāka un kopumā labāka.

Šī apmācība parāda, kā Vue.js ieviest pārejas un animācijas. Jūs uzzināsit, kā izveidot gan vienkāršas pārejas, gan sarežģītas animācijas, izmantojot pāreja komponentu un CSS atslēgkadri.

Vue.js pārejas komponents

Vue.js ir iebūvēts pāreja komponents, kas ļauj lietotnē izveidot animācijas. Šis komponents aptver mērķa elementu, kuru vēlamies animēt.

Šeit pārejas komponents iesaiņo pirmā līmeņa galveni:

 Sveiki </h1>
</transition>

Kad iesaiņojat elementu ar pāreja komponents, komponents piemēros pārejas klases elementam, ko tas iesaiņo. Kopumā ir sešas pārejas klases. Trīs kontrolē elementa animāciju, kad tas nonāk lapā. Pārējie trīs kontrolē elementa animāciju, kad tas atstāj lapu.

Pārejas klašu lietošana, kad lapā tiek ievadīti elementi

Procesa laikā, kad elements tiek ievadīts DOM, pāreja komponents attiecas uz klasēm ievadiet-no, ievadiet, un Enter-active uz to. Šīs klases ļauj kontrolēt, kā elements tiks animēts vai pārsūtīts uz lapu.

• ievadiet-no: tiek lietots elementam, pirms tas nonāk pārlūkprogrammā. Jūs izmantojat šo klasi, lai iestatītu elementa sākotnējo CSS stāvokli.
• ievadiet: tiek lietots elementam, kad tas nonāk pārlūkprogrammā. Jūs izmantojat šo klasi, lai iestatītu elementa galīgo CSS stāvokli.
• Enter-active: tiek lietots, kamēr elements pāriet no viena stāvokļa uz citu. Šeit jūs nosakāt, cik ilgi notiks pāreja.

Apskatīsim piemēru:

<pāreja>
 <h1> Sveikih1>
pāreja>
.ievadiet-no {
necaurredzamība: 0;
}
.enter-to {
necaurredzamība: 1;
}
.enter-active {
pāreja: necaurredzamība 2svieglumu;
}

Izmantojot šo kodu, pirmā līmeņa galvenei nepieciešamas divas sekundes, lai pārietu no neredzamā (necaurredzamība: 0) līdz pilnībā redzamam (necaurredzamība: 1). Šī pāreja notiek, kad elements nonāk DOM. Bez pārejas teksts tiktu parādīts pārlūkprogrammā uzreiz pēc lapas ielādes.

Pārejas klašu lietošana, kad elementi atstāj lapu

The pāreja komponents atbalsta trīs citas pārejas klases, kuras jums ir jāpiemēro, kad elements atstāj DOM. Viņu vārdi ir atvaļinājums-no, atstāt uz, un atstāj-aktīvu. Šīs klases nosaka, kā elements tiks animēts vai pārvietots no lapas.

Kā jūs varētu uzminēt, šīs nodarbības ir līdzīgas ievadiet - klases, par kurām mēs runājām iepriekš. Taču šīs klases tiek aktivizētas tikai tad, kad elements gatavojas atvienot no DOM. Uzstādīšana un atvienošana ir svarīgi DOM jēdzieni. Kā izstrādātājam jums vajadzētu būt a pamata izpratne par DOM un citi saistīti jēdzieni.

Apskatīsim piemēru:

<pāreja>
 <h1> Sveikih1>
pāreja>
.atvaļinājums-no {
necaurredzamība: 0;
}
.atstāt-uz {
necaurredzamība: 1;
}
.atstāt-aktīvu {
pāreja: necaurredzamība 2svieglumu;
}

Šajā gadījumā pirmā līmeņa galvenei ir nepieciešamas divas sekundes, lai lēnām pārietu no redzamā (necaurredzamība: 1) uz neredzamu (necaurredzamība: 0). Šī pāreja notiek, kad elements atstāj DOM. Bez pārejas teksts būtu uzreiz pazudis no pārlūkprogrammas.

Pāreju nosaukumu izmantošana

Varat arī pievienot a nosaukums atribūtu jūsu pārejas komponentam. Kad to izdarīsit, Vue pievienos nosaukumu jūsu pārejas klasēm. Tas nozīmē, ka jūsu lapā var būt vairākas pārejas, katrai no kurām ir unikālas pārejas klases un CSS rekvizīti.

Piemēram, ja iestatāt nosaukumu izbalināt pārejas komponentā, visas pārejas klases tiks apliktas ar prefiksu izbalināt:

<pārejanosaukums ="izbalināt">
 <h1> Sveikih1>
pāreja>
.fade-enter-from {
necaurredzamība: 1;
}
.fade-leave-from {
necaurredzamība: 1;
}
// cits "ievadiet" un "atstāt" klasesaruzizbalinātkāpriedēklis

Pāreju izveide, izmantojot pārejas komponentu

Lai demonstrētu pāreju pakalpojumā Vue.js, iesaiņojiet H1 ietvaros pāreja komponents. Zemāk, jūs izveidosit pogu. Noklikšķinot uz šīs pogas, tas pārslēdz mainīgo izrādes nosaukums starp viltus un taisnība.

Lūk, kods:

Tālāk definējiet skripts sadaļā. Šī sadaļa satur uzstādīt metode, kurā inicializējat izrādes nosaukums mainīgs ar viltus.