Kuidas luua Vue.js üleminekuid?

Üleminekud ei ole mõeldud ainult teie rakendusele ilusa elegantsi lisamiseks. Hea üleminek võib olla erinevus kasutaja registreerumise, ostu sooritamise või teie veebisaidilt täielikult lahkumise vahel. Näiteks avastas Amazon, et see maksab neile umbes 1% müügist iga 100 ms latentsusaja kohta.

Hea ülemineku korral saate vähendada ohtu, et kasutajad teie saidilt lahkuvad. See, kuidas Vue.js töötleb üleminekuid ja animatsioone, muudab nende lisamise rakendusele ülilihtsaks.

Vue.js pakub rakenduse animeerimiseks mitmesuguseid võimalusi, sealhulgas CSS-i üleminekuid ja animatsioone ning JavaScripti kasutamist DOM-i manipuleerimiseks üleminekukonksude ajal. Võite isegi ühendada muude tootjate teegid, näiteks GSAP või VelocityJS.

Selles postituses keskendume põhialustele, kuidas Vue.js CSS-i üleminekuid käitleb. Selle teadmisega saate alustada oma üleminekute loomist. Kui põhialused pole valmis, saate kiiresti omandada Vue ülemineku- ja animatsioonivõimaluste täieliku jõu.

Üleminekud vs animatsioonid

Uurime enne sisenemist suundumuste ja animatsioonide erinevusi.

Üleminek toimub siis, kui element läheb punktist A punkti B. Need on piiratud kahes etapis: alustamisseisundist (A) lõppseisundisse (B). Need toimivad väga hästi näiteks linkide ja nuppude kohal hõljumise või loendisse uue üksuse lisamiseks. Üleminekute peamine eesmärk on luua loomulik tõestus, et midagi on muutunud. Heaks näiteks reaalses maailmas ülemineku kohta oleksid automaatsed uksed. Need algavad suletult ja kui te nende ette astute, lähevad nad automaatselt avatud olekusse.

Siin on näide lihtsast üleminekust Stripe'i kodulehelt.

Animatsioonidel võib seevastu olla palju olekuid, mida nimetatakse võtmekaadriteks. Nad võivad liikuda punktist A punkti B punkti C punkti D ja kaugemale. Need on kasulikud näiteks kerimiskere või heli visualiseerija jaoks. Nende peamine eesmärk on pidevalt näidata, et midagi muutub. Neil võib olla lõppevaid olekuid, kuid erinevalt üleminekutest ei piirdu need kahe olekuga. Looduses oleks mullivann animatsiooni näide. See on pidevalt muutuvas ja keerlevas olekus, kuid see võib lõpuks lõppeda.

Näide animatsioonist Stripe’s Checkouti lehel.

Teatud mõttes on animatsioonid lihtsalt super üleminekud, kuna need lisavad olekute vahel rohkem. Kui üleminekud kulgevad ainult punktist A punkti B, siis animatsioonidel võib olla nii palju olekutevahelisi olekuid, kui vaja. Pärast üleminekute põhialuste mõistmist on animatsioonide juurde hüppamine lihtne samm.

Selles postituses keskendume eranditult üleminekutele ja sellele, kuidas luua ülaltoodud triibunäidikust menüü hõljumise üleminek.

Alustame järgmise HTML-iga:

Ülemineku element

Vue.js-l on ümbrise element , mis muudab teie elementide või komponentide JavaScripti animatsioonide, CSS-animatsioonide ja CSS-i üleminekute käsitsemise lihtsaks.

CSS-i üleminekute korral hoolitseb klasside rakendamise ja mitterakendamise eest element . Peate vaid määratlema, kuidas soovite elementi ülemineku ajal välja näha.

See toimib nagu iga teine ​​Vue.js komponent ja saate selle kohta kasutada samu direktiive nagu v-if ja v-show.

Oma menüü hüpikmenüü jaoks saame mähkida menüü hüpiknimega selle elemendi ja anda sellele nimi.

<ülemineku nimi = "menu-popover">
  

Üleminekuklassid

Üleminekuelement rakendab teie märgistusele kuus klassi, mida saate kasutada sisestus- ja lahkumistehingute eraldi käsitlemiseks. Elemendi kuvamisel A-st B-ni on kolm klassi ja elemendi eemaldamise ajal A-st B-ni ülemineku käsitlemiseks veel kolm klassi.

Sisestussiire toimub siis, kui komponent on sisse lülitatud või seda kuvatakse. Need klassid on: v-sisene, v-sisene-aktiivne, v-sisene-v

Puhkuse üleminek toimub siis, kui komponent keelatakse või eemaldatakse. Need klassid on: v-jäta, v-jäta-aktiivne ja v-jäta-jäta

V-eesliide on vaikimisi kasutamata nimeta elementi . Kuna me nimetasime üleminekumenüüd-popoverit, oleks meie puhul klass v-enter selle asemel menüü-popover-enter.

Sisestage üleminekud

Menüü hüpikmenüü korral toimub sisestussiire siis, kui kasutaja algselt hõljub menüü kohal.

v-enter on klass, mida kasutate määratlemaks, mis see ülemineku osa on. Teisisõnu määratleb see ülemineku algusstiilid.

v-enter-to on klass, mida kasutate ülemineku B osa või lõppstiilide määratlemiseks.

v-enter-active on klass, mis aitab teil määratleda, kuidas liikuda punktist A punkti B. Nii lähevad siin näiteks kestus ja kergendavad funktsioonid.

menüü popover-enter

Enne kui hõljutate menüü hüpiknupu kohal, on selle algseisund nähtamatu. Sellel on ka kerge pöörleva teisendusefekt, mida rakendatakse, ja siis see libiseb sisse. See klass näeb välja järgmine:

.menu-popover-enter {
  läbipaistmatus: 0;
  muundamine: pöörake Y (50 kraadi);
}

menüü-popover-enter-to

Pärast kursori hõljumist kursori kuvamist on selle lõppseisund täielikult nähtav ja seda ei muudeta. See lõppev üleminek näeb välja järgmine:

.menu-popover-enter-to {
  läbipaistmatus: 1;
  muundamine: pöörake Y (0 °);
}

menüü-popover-sisesta-aktiivne

Siin saate rakendada stiile, mis käsitlevad ülemineku toimumist. Stripe'i puhul on tegemist üsna kiire üleminekuga, mis toimub umbes 200 ms pärast ja see animeerib samal ajal nii läbipaistmatust kui ka teisendust. Samuti näib, et sellel on kerge animatsioon.

Selle animatsiooni sees oleva sisu saab määratleda siin:

.menu-popover-enter-active {
  üleminek: läbipaistmatus, muutke 200ms kergendust;
}

Jätke üleminekud

Menüü hüpikmenüü lahkumine vasakule toimub siis, kui kasutaja hõljub menüüst välja ja üleminekuelement peidab. See on sisend-üleminekust täiesti eraldiseisev üleminek.

Pöördtehingute hõlpsa loomine

90% juhtudest on millegi väljalülitamise viis vastupidine sellele, kuidas see ümber läheb, kuid see on siiski eraldi üleminek. Üks üleminek ekraanile sisenemisel (hõljutate kursorit menüü kohal) ja teine ​​üleminek lahkudes ekraanil (hõljutate kursorit menüüst välja).

Et seda juhtuda menüü hüpikmenüüga, veendume lihtsalt, et v-puhkuse klass on sama, mis v-enter-to klass, nii et puhkuse üleminekud algavad seal, kus sisenemise üleminek lõppes.

Siis oleks v-lahkumine sama mis v-enter-klass, nii et see lõppeks seal, kus algas.

Lõpuks veendume, et v-sisene-aktiivne ja v-lahkuv-aktiivne klassid on samad, nii et mõlemad üleminekud on sama kiirusega.

.menüü-popover-enter,
.menu-popover-lahkuda {
  läbipaistmatus: 0;
  muundamine: pöörake Y (50 kraadi);
}
.menüü-popover-enter-to,
.menu-popover-jäta {
  läbipaistmatus: 1;
  muundamine: pöörake Y (0 °);
}
.menüü-popover-enter-aktiivne,
.menüü-popover-lahku-aktiivne {
  üleminek: läbipaistmatus, muutke 200ms kergendust;
}

Tuginedes põhialustele

Selle põhiteadmiste abil üleminekutest on lihtne näha, kuidas CSS-animatsioonid töötavad, ja seejärel haarata midagi veel võimsamat, näiteks JavaScripti animatsioone. Üleminekuelement võib selle kõige vastu aidata.

Põhjalikuma teabe saamiseks selle kohta, kuidas Vue CSS-i üleminekuid käitleb ja kõiki üleminegielemendi keerukusi saab, leiate Vue.js-dokumentatsiooni üleminekute juhendist.

Jätkake õppimist

Vue meisterlikkus hõlmab üleminekuid ja animatsioone põhjalikumalt meie reaalainete kursusel. Vaata järgi!

Hoidke lugemist

  • Kiirendage oma arendusaega Vue DevToolsi abil
  • Nuxt.js kasutamise 10 põhjust
  • Nuxt.js SEO parimad tavad