Siirtymillä ja animaatioilla on tärkeä rooli käyttökokemuksessa. Lisäämällä hienovaraisia ​​animaatioita ja siirtymiä web-sivun elementtien välillä voit parantaa käyttökokemusta. Sivusto näyttää paljon sujuvammalta, kiinnostavammalta ja yleensä paremmalta kauttaaltaan.

Tämä opetusohjelma näyttää, kuinka siirtymiä ja animaatioita toteutetaan Vue.js: ssä. Opit luomaan sekä yksinkertaisia ​​siirtymiä että monimutkaisia ​​animaatioita käyttämällä siirtyminen komponentti- ja CSS-avainkehykset.

Vue.js-siirtymäkomponentti

Vue.js: ssä on sisäänrakennettu siirtyminen komponentti, jonka avulla voit luoda animaatioita sovellukseesi. Tämä komponentti kiertää kohdeelementin, jonka haluamme animoida.

Tässä siirtymäkomponentti kääri tason yksi otsikon:

 Hei </h1>
</transition>

Kun käärit elementin siirtyminen komponentti, komponentti käyttää siirtymäluokkia elementtiin, jonka se käärii. Siirtymäluokkaa on yhteensä kuusi. Kolme ohjaa elementin animaatiota sen saapuessa sivulle. Muut kolme ohjaavat elementin animaatiota sen poistuessa sivulta.

Tässä artikkelissa käytetty koodi on saatavilla tässä GitHub-arkisto ja sen käyttö on ilmaista MIT-lisenssin alaisena.

Siirtymäluokkien käyttäminen, kun elementit tulevat sivulle

Kun elementti saapuu DOM: iin, siirtyminen komponentti koskee luokkia enter-from, enter-to, ja enter-aktiivinen siihen. Näiden luokkien avulla voit hallita, kuinka elementti animoituu tai siirtyy sivulle.

• enter-from: Käytetään elementissä ennen kuin se tulee selaimeen. Tämän luokan avulla voit määrittää elementin CSS-alkutilan.
• enter-to: Sovelletaan elementtiin, kun se tulee selaimeen. Tämän luokan avulla voit määrittää elementin lopullisen CSS-tilan.
• enter-aktiivinen: Käytetään elementin siirtyessä tilasta toiseen. Tässä voit sanella, kuinka kauan siirtyminen kestää.

Katsotaanpa esimerkkiä:

<siirtyminen>
 <h1> Heih1>
siirtyminen>
.enter-from {
opasiteetti: 0;
}
.enter-to {
opasiteetti: 1;
}
.enter-active {
siirtyminen: opasiteetti 2shelppous;
}

Tällä koodilla tason yksi otsikko siirtyy näkymättömästä (opasiteetti: 0) täysin näkyväksi (opasiteetti: 1). Tämä siirtymä tapahtuu, kun elementti tulee DOM: iin. Ilman siirtoa teksti olisi näkynyt selaimessa heti sivun latautumisen jälkeen.

Siirtymäluokkien käyttäminen, kun elementit poistuvat sivulta

The siirtyminen komponentti tukee kolmea muuta siirtymäluokkaa, joita sinun on käytettävä, kun elementti poistuu DOM: sta. Niiden nimet ovat lähteä, jättää, ja jättää aktiiviseksi. Nämä luokat hallitsevat, kuinka elementti animoituu tai siirtyy sivulta.

Kuten saatat arvata, nämä luokat ovat samanlaisia tulla sisään- luokat, joista keskustelimme aiemmin. Mutta nämä luokat aktivoidaan vain, kun elementti on purkamassa DOM: sta. Asennus ja irrottaminen ovat tärkeitä DOM: n käsitteitä. Kehittäjänä sinulla pitäisi olla a perustiedot DOM: sta ja muut asiaan liittyvät käsitteet.

Katsotaanpa esimerkkiä:

<siirtyminen>
 <h1> Heih1>
siirtyminen>
.lähteä {
opasiteetti: 0;
}
.jättää {
opasiteetti: 1;
}
.jätä aktiiviseksi {
siirtyminen: opasiteetti 2shelppous;
}

Tässä tapauksessa tason yksi otsikko siirtyy hitaasti näkyvästä (opasiteetti: 1) näkymättömäksi (opasiteetti: 0). Tämä siirtymä tapahtuu, kun elementti poistuu DOM: sta. Ilman siirtoa teksti olisi kadonnut selaimesta välittömästi.

Siirtymänimien käyttäminen

Voit myös lisätä a nimi määrite siirtymäkomponentille. Kun teet tämän, Vue lisää nimen siirtymäluokkiisi. Tämä tarkoittaa, että sivullasi voi olla useita siirtymiä, joista jokaisella on yksilölliset siirtymäluokat ja CSS-ominaisuudet.

Jos esimerkiksi asetat nimen haalistua siirtymäkomponentissasi, kaikkien siirtymäluokkien etuliitteenä on häivyttää:

<siirtyminennimi ="haalistua">
 <h1> Heih1>
siirtyminen>
.fade-enter-from {
opasiteetti: 1;
}
.fade-leave-from {
opasiteetti: 1;
}
// muu "tulla sisään" ja "lähteä" luokatkanssathehaalistuakutenetuliite

Siirtymien luominen siirtymäkomponentilla

Voit esitellä siirtymisen Vue.js: ssä käärimällä H1 sisällä siirtyminen komponentti. Pinnan alla, luot painikkeen. Kun tätä painiketta napsautetaan, se vaihtaa muuttujan showTitle välillä väärä ja totta.

Tässä on koodi:

Määritä seuraavaksi käsikirjoitus osio. Tämä osio sisältää perustaa menetelmä, jolla alustetaan showTitle muuttuja kanssa väärä.