Üleminekutel ja animatsioonidel on kasutajakogemuses suur osa. Lisades veebilehele peeneid animatsioone ja üleminekuid elementide vahel, saate kasutajakogemust täiustada. Veebisait tundub palju sujuvam, kaasahaaravam ja üldiselt parem.

See õpetus näitab, kuidas Vue.js-is üleminekuid ja animatsioone rakendada. Õpid, kuidas luua nii lihtsaid üleminekuid kui ka keerulisi animatsioone kasutades üleminek komponendi ja CSS-i võtmekaadrid.

Vue.js-i üleminekukomponent

Vue.js-il on sisseehitatud üleminek komponent, mis võimaldab teil rakenduses animatsioone luua. See komponent ümbritseb sihtelementi, mida tahame animeerida.

Siin mähib üleminekukomponent esimese taseme päise:

 Tere </h1>
</transition>

Kui mähite elemendi tähisega üleminek komponent, rakendab komponent elemendile, mida ta ümbritseb, üleminekuklasse. Üleminekuklasse on kokku kuus. Kolm juhivad elemendi animatsiooni, kui see lehele siseneb. Ülejäänud kolm juhivad elemendi animatsiooni, kui see lehelt lahkub.

Selles artiklis kasutatud kood on saadaval selles GitHubi hoidla ja seda saate MIT-i litsentsi alusel tasuta kasutada.

Üleminekuklasside rakendamine, kui elemendid sisenevad lehele

Elemendi DOM-i sisenemise protsessi käigus üleminek komponent rakendab klasse enter-from, enter-toja enter-aktiivne sellele. Need klassid võimaldavad teil juhtida, kuidas element animeerub või lehele edastatakse.

• enter-from: rakendatakse elemendile enne selle brauserisse sisenemist. Selle klassi abil saate määrata elemendi algse CSS-i oleku.
• enter-to: rakendatakse elemendile, kui see brauserisse siseneb. Saate seda klassi kasutada elemendi lõpliku CSS-i oleku määramiseks.
• enter-aktiivne: rakendatakse elemendi üleminekul ühest olekust teise. Siin saate dikteerida, kui kaua üleminek aega võtab.

Vaatame näidet:

<üleminek>
 <h1> Tereh1>
üleminek>
.enter-from {
läbipaistmatus: 0;
}
.enter-to {
läbipaistmatus: 1;
}
.enter-active {
üleminek: läbipaistmatus 2skergus;
}

Selle koodiga kulub esimese taseme päisel nähtamatust üleminekuks kaks sekundit (läbipaistmatus: 0) kuni täielikult nähtavaks (läbipaistmatus: 1). See üleminek toimub siis, kui element siseneb DOM-i. Ilma üleminekuta oleks tekst pärast lehe laadimist kohe brauseris ilmunud.

Üleminekuklasside rakendamine, kui elemendid lehelt lahkuvad

The üleminek komponent toetab kolme teist üleminekuklassi, mida peate rakendama, kui element lahkub DOM-ist. Nende nimed on lahkuma-alates, jätmineja jäta-aktiivseks. Need klassid määravad, kuidas element animeerub või lehelt edastatakse.

Nagu võis arvata, on need klassid sarnased sisenema- klassidest, millest me varem rääkisime. Kuid need klassid aktiveeritakse ainult siis, kui element on DOM-ist lahti ühendamas. Paigaldamine ja lahtivõtmine on DOM-i olulised mõisted. Arendajana peaks teil olema a põhiteadmised DOM-ist ja muud sellega seotud mõisted.

Vaatame näidet:

<üleminek>
 <h1> Tereh1>
üleminek>
.jätma-alates {
läbipaistmatus: 0;
}
.leave-to {
läbipaistmatus: 1;
}
.jätke aktiivseks {
üleminek: läbipaistmatus 2skergus;
}

Sel juhul kulub esimese taseme päises nähtavalt (läbipaistmatus: 1) nähtamatuks (läbipaistmatus: 0). See üleminek toimub siis, kui element DOM-ist lahkub. Ilma üleminekuta oleks tekst brauserist koheselt kadunud.

Üleminekunimede kasutamine

Võite lisada ka a nimi atribuut teie üleminekukomponendile. Kui teete seda, lisab Vue teie üleminekuklassidele nime. See tähendab, et teie lehel võib olla mitu üleminekut, millest igaühel on ainulaadsed üleminekuklassid ja CSS-i atribuudid.

Näiteks kui määrate nime tuhmuma üleminekukomponendil, siis on kõigi üleminekuklasside eesliide tuhmuma:

<ülemineknimi ="tuhmuma">
 <h1> Tereh1>
üleminek>
.fade-enter-from {
läbipaistmatus: 1;
}
.fade-leave-from {
läbipaistmatus: 1;
}
// muud "sisenema" ja "lahkuda" klassidkoosatuhmumanagueesliide

Üleminekute loomine üleminekukomponendi abil

Vue.js-i ülemineku demonstreerimiseks mähkige H1 sees üleminek komponent. All, loote nupu. Kui sellel nupul klõpsate, lülitab see muutuja sisse saate pealkiri vahel vale ja tõsi.

Siin on kood:

Järgmisena määratlege stsenaarium osa. See jaotis sisaldab seadistamine meetod, mille abil initsialiseerite saate pealkiri muutuv koos vale.