Vue Academy · Oppitunti

Transition-komponentti

v-enter-from-, v-enter-active-, v-enter-to- ja v-leave-* -luokat, name-prop mukautetuille luokille.

Oppitunti 1/413 vaihetta

Transition-komponentti on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Mitä Transition-komponentti tekee

Vue sisältää sisäänrakennetun <Transition>-komponentin, joka käyttää sisääntulo- ja poistumisanimaatioita yhteen elementtiin tai komponenttiin, kun se lisätään tai poistetaan v-if- tai v-show-direktiivillä.

Se ei itse piirrä ylimääräistä DOM-elementtiä — se hallinnoi vain lapsielementtinsä CSS-luokkia ja ajoitusta.

<Transition>
  <p v-if="show">Hello Vue</p>
</Transition>

Vain yksi elementti

<Transition> odottaa täsmälleen yhtä suoraa lapsielementtiä. Usean sisaruselementin kääriminen ei toimi — käytä listoihin sen sijaan <TransitionGroup>-komponenttia.

Lapsielementin tilaa on vaihdettava v-if-, v-show-direktiivillä tai dynaamisella komponentilla.

<!-- valid: one child -->
<Transition>
  <div v-if="open" class="panel">Content</div>
</Transition>

Kuusi Transition-luokkaa

Vue lisää ja poistaa sisääntulon tai poistumisen aikana automaattisesti kuusi luokkaa peräkkäin.

v-enter-from / v-leave-from — alkutila
v-enter-active / v-leave-active — aktiivinen vaihe (sijoita transition tähän)
v-enter-to / v-leave-to — lopputila

/* default prefix is "v-" */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

Transitionin nimeäminen

Anna transitionille name-prop, jotta luokkien etuliite vaihtuu muodosta v- antamaksesi nimeksi. Kun käytät arvoa name="fade", luokat ovat esimerkiksi fade-enter-from ja fade-enter-active.

<Transition name="fade">
  <p v-if="show">Fades in and out</p>
</Transition>

Täydellinen fade-esimerkki

Klassinen fade-animaatio animoi opacity-ominaisuutta. Elementti alkaa täysin läpinäkyvänä, aktiivinen luokka määrittää transitionin ja to-luokka tuo elementin täyteen peittävyyteen.

.fade-enter-from {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 0.3s ease;
}
.fade-enter-to {
  opacity: 1;
}

Sisääntulon kulku vaihe vaiheelta

Kun elementti lisätään:

fade-enter-from ja fade-enter-active lisätään ennen piirtämistä (opacity 0).
Seuraavassa kehyksessä fade-enter-from poistetaan ja fade-enter-to lisätään, jolloin opacity animoituu kohti arvoa 1.
Transitionin päätyttyä sekä active- että to-luokka poistetaan.

/* frame 1: opacity 0 (enter-from + enter-active) */
/* frame 2: opacity 1 (enter-to + enter-active) */

Poistumisen kulku

Poistuminen toimii päinvastoin kuin sisääntulo käyttäen leave-luokkia. Usein voit käyttää samaa aktiivista sääntöä molempiin suuntiin.

.fade-leave-from {
  opacity: 1;
}
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-leave-to {
  opacity: 0;
}

v-if ja v-show

Molemmat käynnistävät transitionin. v-if liittää elementin DOM:iin ja poistaa sen sieltä, kun taas v-show pitää elementin DOM:ssa ja vaihtaa sen display-ominaisuutta. v-show-tapauksessa Vue käsittelee display-arvon vaihtamisen aktiivisen vaiheen ympärillä, jotta animaatio näkyy edelleen.

<Transition name="fade">
  <p v-show="visible">Toggled with display</p>
</Transition>

Näyttäminen ensimmäisellä renderöinnillä

Oletusarvoisesti transition ei käynnisty ensimmäisellä renderöinnillä. Lisää appear-prop, jotta sisääntuloanimaatio toistetaan, kun komponentti liitetään ensimmäisen kerran.

<Transition name="fade" appear>
  <p>Animates in on page load</p>
</Transition>

Kahden elementin välinen transition

Vaihda kaksi elementtiä käyttämällä v-if- ja v-else-direktiivejä yhden Transition-komponentin sisällä. Anna kummallekin yksilöllinen key, jos elementeillä on sama tagi, jotta Vue käsittelee niitä erillisinä.

<Transition name="fade" mode="out-in">
  <button v-if="loading" key="load">Loading...</button>
  <button v-else key="done">Done</button>
</Transition>

Liikkeen vähentäminen ja saavutettavuus

Huomioi käyttäjät, jotka suosivat vähäisempää liikettä. Poista transitionit käytöstä tai lyhennä niitä prefers-reduced-motion-media queryn avulla, jotta animaatiot eivät aiheuta epämukavuutta.

@media (prefers-reduced-motion: reduce) {
  .fade-enter-active,
  .fade-leave-active {
    transition: none;
  }
}

Pikatarkistus

Mitä fade-enter-from määrittää?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opit käyttämään sisäänrakennettua <Transition>-komponenttia: se käärii yhden v-if- tai v-show-direktiivillä vaihdettavan elementin, käyttää kuutta CSS-luokkaa (enter-from, enter-active, enter-to ja vastaavat leave-luokat), tukee name-etuliitettä, ensimmäisen renderöinnin appear-propia sekä vaihtoja ohjaavaa mode-propia.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Transition-komponentti” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Transition-komponentti”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Transition-komponentti”?

v-enter-from-, v-enter-active-, v-enter-to- ja v-leave-* -luokat, name-prop mukautetuille luokille. Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Transition-komponentti”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Vue Academy