Vue Academy · Oppitunti

TransitionGroup listaanimaatioihin

v-for-listojen animointi, siirtymät liikkeelle, viivästetyt porrastetut animaatiot.

Oppitunti 4/413 vaihetta

TransitionGroup listaanimaatioihin on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/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.

Listojen animointi

<Transition> käsittelee yhtä elementtiä. v-for-direktiivillä renderöityihin listoihin käytetään <TransitionGroup>-komponenttia, joka animoi alkioiden lisäämisen, poistamisen ja järjestyksen muuttamisen.

tag-prop

Toisin kuin Transition, TransitionGroup voi renderöidä todellisen kääre-elementin. Välittäkää sille tag="ul" (tai mikä tahansa muu tagi), jolloin se tuottaa kyseisen elementin lista-alkioiden ympärille.

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</TransitionGroup>

Jokainen alkio tarvitsee key-arvon

Jokaisella alkiolla on oltava yksilöllinen :key. Vue käyttää sitä seuratakseen, mitkä alkiot siirtyvät, tulevat näkyviin tai poistuvat. Älkää koskaan käyttäkö taulukon indeksiä animoitujen listojen key-arvona.

<li v-for="item in items" :key="item.id">{{ item.text }}</li>

Enter- ja leave-luokat

TransitionGroup käyttää samoja enter- ja leave-luokkia kuin Transition. Määrittäkää ne alkioiden yksittäistä ilmestymistä ja poistumista varten.

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

Erityinen move-luokka

Keskeinen ominaisuus on -move-luokka (esimerkiksi list-move). Kun alkiot järjestetään uudelleen, Vue animoi jokaisen niistä sujuvasti uuteen sijaintiin transform-siirtymän avulla.

.list-move {
  transition: transform 0.4s ease;
}

FLIP-tekniikka

-move-luokan taustalla on FLIP: First-vaiheessa tallennetaan ensin vanha sijainti, Last-vaiheessa luetaan uusi sijainti, Invert-vaiheessa käytetään transformia, jotta alkio näyttää pysyvän paikallaan, ja Play-vaiheessa transform poistetaan. Vue tekee tämän automaattisesti.

/* Vue computes: translate(oldX - newX) then animates to 0 */

Poistuvat alkiot tarvitsevat absoluuttisen asemoinnin

Poistettava elementti vie edelleen tilaa, mikä voi rikkoa sen naapureiden move-animaation. Määrittäkää position: absolute leave-active-luokalle, jotta poistuvat alkiot otetaan pois normaalista asettelusta.

.list-leave-active {
  position: absolute;
}

Esimerkki järjestettävästä listasta

Kun yhdistätte enter-, leave- ja move-luokat, Vue animoi lisäämisen, poistamisen ja järjestyksen sekoittamisen samanaikaisesti.

function shuffle() {
  items.value = items.value
    .slice()
    .sort(() => Math.random() - 0.5);
}

Porrastus transitionDelay-arvolla

Jos haluatte alkioiden ilmestyvän yksi kerrallaan, sitokaa inline-transition-delay alkion indeksin perusteella. Jokainen alkio odottaa hieman edellistä pidempään.

<li
  v-for="(item, i) in items"
  :key="item.id"
  :style="{ transitionDelay: i * 50 + 'ms' }"
>
  {{ item.text }}
</li>

Porrastus JavaScript-hookeilla

Dataohjattuun porrastukseen voitte käyttää myös JavaScript-hookeja ja data-index-attribuuttia, jolloin kunkin onEnter-kutsua viivästetään elementin indeksin perusteella.

function onEnter(el, done) {
  const delay = el.dataset.index * 50;
  setTimeout(() => {
    el.style.opacity = 1;
    done();
  }, delay);
}

Suorituskykyä koskevia huomioita

FLIP animoi transform-ominaisuutta, joka sopii hyvin GPU:lle. Pitäkää listat kohtuullisen kokoisina ja suosikaa sujuvaa 60 fps:n liikettä varten transform- ja opacity-ominaisuuksia asettelua muuttavien ominaisuuksien, kuten widthin tai topin, sijaan.

Pikatarkistus

Mitä list-move-luokka mahdollistaa?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte käyttämään <TransitionGroup>-komponenttia listoille: renderöimään kääreen tag-propilla, antamaan jokaiselle alkiolle yksilöllisen :key-arvon, käyttämään enter- ja leave-luokkia sekä -move-luokkaa FLIP-pohjaisiin järjestyksenmuutosanimaatioihin, asemoimaan poistuvat alkiot absoluuttisesti ja luomaan porrastustehosteita indeksipohjaisella transitionDelay-arvolla.

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 ”TransitionGroup listaanimaatioihin” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “TransitionGroup listaanimaatioihin”. 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 ”TransitionGroup listaanimaatioihin”?

v-for-listojen animointi, siirtymät liikkeelle, viivästetyt porrastetut animaatiot. 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 4/4.

Kuinka kauan ”TransitionGroup listaanimaatioihin”-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