Kuinka luoda Vue.js-siirtymiä

Siirtymät eivät ole vain lisäämään kauniita hohtoasi sovellukseesi. Hyvä siirtyminen voi olla ero käyttäjän ilmoittautumisen, oston tekemisen tai verkkosivustostasi kokonaan poistumisen välillä. Esimerkiksi Amazon havaitsi, että se maksoi heille noin 1% myynnistä jokaisesta 100 viiveestä.

Voit vähentää riskiä, ​​että käyttäjät poistuvat sivustostasi hyvällä siirtymisellä. Tapa, jolla Vue.js käsittelee siirtymiä ja animaatioita, on erittäin helppo lisätä ne sovellukseen.

Vue.js tarjoaa sinulle erilaisia ​​tapoja animoida sovelluksesi, mukaan lukien CSS-muutokset ja animaatiot sekä JavaScriptin avulla DOM: n manipulointiin siirtymäkoukkujen aikana. Voit jopa kytkeä kolmansien osapuolien kirjastoja, kuten GSAP tai VelocityJS.

Tässä viestissä aiomme keskittyä perusteisiin, kuinka Vue.js käsittelee CSS-siirtymiä. Tämän tiedon avulla voit alkaa luoda omia siirtymiäsi. Kun perusteet ovat alhaalla, voit nopeasti siirtyä hallitsemaan Vue-siirtymän ja animaation ominaisuuksien täyden voiman.

Siirtymät vs. animaatiot

Tutkitaan eroja siirtymien ja animaatioiden välillä ennen kuin sukellamme.

Siirtymä tapahtuu, kun elementti siirtyy pisteestä A pisteeseen B. Ne ovat rajoitettu kahteen vaiheeseen: alkamistilasta (A) lopputilaan (B). Ne toimivat todella hyvin esimerkiksi siirtämällä linkkejä ja painikkeita tai lisäämällä uusi kohde luetteloon. Siirtymien päätarkoitus on luoda luonnollinen osoitus siitä, että jotain on muuttunut. Hyvä esimerkki muutoksesta todellisessa maailmassa olisivat automaattiovet. Ne alkavat sulkea ja kun astut edessäsi, ne siirtyvät automaattisesti avoimeen tilaan.

Tässä on esimerkki yksinkertaisesta siirtymisestä Stripen kotisivulta.

Animaatioilla, toisaalta, voi olla monia niiden välisiä tiloja, jotka tunnetaan avainruutuina. Ne voivat siirtyä A: sta B: hen C: hen D: hen ja sen ulkopuolelle. Ne ovat hyödyllisiä esimerkiksi kehrättäessä tai audiovisuaalisesti. Niiden päätarkoitus on jatkuvasti esitellä, että jokin on muuttumassa. Heillä voi olla lopputilat, mutta toisin kuin siirtymiä, ne eivät ole rajoittuneet kahteen tilaan. Luonnossa poreallas olisi esimerkki animaatiosta. Se on jatkuvasti muuttuvassa ja pyörivässä tilassa, mutta se saattaa loppua lopulta.

Esimerkki animaatiosta Stripe's Checkout -sivulla.

Tavallaan animaatiot ovat vain supersiirtymiä, koska ne lisäävät tilojen välillä. Vaikka siirtymät kulkevat vain kohdasta A pisteeseen B, animaatioissa voi olla niin monta tilan välistä kuin tarvitaan. Kun olet ymmärtänyt siirtymävaiheen perusteet, siirtyminen animaatioihin on helppo askel.

Tässä viestissä keskitymme yksinomaan siirtymiin ja siihen, miten luodaan valikkokohtainen siirtymä yllä olevasta raitaesimerkistä.

Aloitamme seuraavalla HTML: llä:

Siirtymäelementti

Vue.js sisältää kääreelementin , jonka avulla on helppo käsitellä JavaScript-animaatioita, CSS-animaatioita ja CSS-siirtymiä elementeissäsi tai komponenteissasi.

CSS-siirtymien tapauksessa -elementti huolehtii luokkien soveltamisesta ja soveltamatta jättämisestä. Ainoa mitä sinun täytyy tehdä, on määritellä, kuinka haluat elementin näyttävän siirtymisen aikana.

Se toimii kuten mikä tahansa muu Vue.js-komponentti, ja voit käyttää samoja direktiivejä, kuten v-if ja v-show.

Valikkonäyttöelementtiä varten voimme kääri valikkokohdanmerkinnät tällä -elementillä ja antaa sille nimen.


  

Siirtymäluokat

Siirtymäelementti merkitsee kuusi luokkaa merkintöihisi, joita voit käyttää käsittelemään erikseen syöttö- ja poistumissiirtymiä. On olemassa kolme luokkaa käsittelemään A-B-siirtymää, kun elementti näytetään, ja vielä kolme luokkaa käsittelemään A-B-siirtymää, kun elementti poistetaan.

Enter-siirtymä tapahtuu, kun komponentti otetaan käyttöön tai näytetään. Nämä luokat ovat: v-enter, v-enter-active, v-enter-to

Poistumissiirto tapahtuu, kun komponentti poistetaan käytöstä tai poistetaan. Ne luokat ovat: v-jättää, v-jätä-aktiivinen ja v-jätä-to

V-etuliite on oletus, kun käytät -elementtiä ilman nimeä. Koska nimitimme siirtymän valikko-ponnahdusikkunaksi, v-enter-luokka olisi sen sijaan valikkokohta-ponnahdusvalikko.

Syötä muutokset

Valikon ponnahdusikkunassa siirtymisvaihe tapahtuu, kun käyttäjä siirtyy alun perin valikon päälle.

v-enter on luokka, jolla määrittelet mitä osa siirtymää on. Toisin sanoen se määrittelee siirtymävaiheen aloitustyylit.

v-enter-to on luokka, jolla määrittelet siirtymisen B-osan tai päätetyylit.

v-enter-active on luokka, joka auttaa sinua määrittelemään, miten siirrytään pisteestä A pisteeseen B. Joten tässä kohtaa esimerkiksi kestot ja keventämistoiminnot menevät.

menu-popover anna

Ennen kuin siirrät valikkokohdan päälle, sen alkutila on näkymätön. Sillä on myös pieni kääntyvä muutosvaikutus siihen sovellettuna, ja sitten se kääntyy sisään. Tämä luokka näyttää seuraavalta:

.menu-popover-enter {
  opasiteetti: 0;
  muunnos: kiertävä Y (50deg);
}

menu-popover-enter-kohteeseen

Kun olet hidastanut valikon ponnahdusikkunaa, sen lopputila on täysin näkyvissä eikä sitä muuteta. Tämä päättyvä siirtymä näyttää seuraavalta:

.menu-popover-enter-to {
  opasiteetti: 1;
  muunnos: kiertävä Y (0deg);
}

valikko-popover-enter-aktiivinen

Tässä voit käyttää tyylejä, jotka käsittelevät siirtymän tapahtumia. Stripe-tapauksessa se on melko nopea siirtymä, joka tapahtuu noin 200 ms: n päässä ja se animoi sekä opasiteetin että muunnoksen samanaikaisesti. Vaikuttaa myös siltä, ​​että siinä on pieni animaatio.

Voimme määritellä kaiken tämän animaation sisällä:

.menu-popover-enter-active {
  siirtymä: opasiteetti, muunna 200 ms helppoutta;
}

Jätä muutokset

Valikkopuhelun vasemmalle siirtyminen tapahtuu, kun käyttäjä siirtyy ulos valikosta ja siirtymäelementti piiloutuu. Se on täysin erillinen siirtymä enter-siirtymästä.

Luo helposti käänteisiä siirtymiä

90%: n tapauksista tapa, jolla jokin siirtyy ulos, on vain päinvastainen tapa, jolla se siirtyy, mutta se on silti erillinen muutos. Yksi siirtymä, kun se tulee näyttöruutuun (siirrät hiiren valikon päälle) ja toinen siirtymä, kun se poistuu (hiipit valikossa).

Jotta tämä tapahtuisi valikon ponnahdusikkunassa, varmistamme vain, että v-jätä-luokka on sama kuin v-kirjoita -luokka, jotta lomansiirtymät alkavat sinne, missä sisääntulo-siirtymä päättyi.

Silloin v-jätä-olisi sama kuin v-enter-luokka niin, että se päättyy mihin se alkoi.

Lopuksi varmistamme, että v-sisäänaktiivinen ja v-jättää aktiivinen luokka ovat samat, jotta molemmilla siirtymillä on sama nopeus.

.menu-popover anna,
.menu-popover-jättää {
  opasiteetti: 0;
  muunnos: kiertävä Y (50deg);
}
.menu-popover-enter-to,
.menu-popover-lähteä {
  opasiteetti: 1;
  muunnos: kiertävä Y (0deg);
}
.menu-popover-enter-aktiivinen,
.menu-popover-jättää-aktiivinen {
  siirtymä: opasiteetti, muunna 200 ms helppoutta;
}

Rakentaminen perustietojen päälle

Tämän siirtymävaiheen perustiedon avulla on helppo nähdä, kuinka CSS-animaatiot toimivat, ja tarttua sitten ymmärtää jotain vielä tehokkaampaa, kuten JavaScript-animaatioita. Siirtymäelementti voi auttaa tässä kaikessa.

Tarkempia tietoja siitä, kuinka Vue käsittelee CSS-siirtymiä ja kaikkia siirtymäelementin monimutkaisuuksia, löydät Vue.js-dokumentaation siirto-oppaasta.

Jatka oppimista

Vue Mastery kattaa muutokset ja animaatiot perusteellisemmin Real World Vue -kurssillamme. Tarkista se!

Jatka lukemista

  • Nopeuta kehitysaikaa Vue DevTools -sovelluksella
  • 10 syytä käyttää Nuxt.js-tiedostoa
  • Nuxt.js SEO: n parhaat käytännöt