Elementtien saapumis- ja poistumisanimaatiot
Animoikaa elementtien saapumista ja poistumista
Elementtien saapumis- ja poistumisanimaatiot on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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 Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.
Elementtien ilmestymisen animointi
Usein haluat animoida elementtejä niiden ilmestyessä tai poistuessa, esimerkiksi kun alkio lisätään listaan tai poistetaan siitä. Angular tarjoaa tähän aliakset :enter ja :leave.
void ja elementtien ilmestyminen
Elementti, joka ei ole DOM:ssa, on tilassa void. Sisääntulo tarkoittaa void => * ja poistuminen * => void.
:enter-alias
:enter on lyhenne ilmaukselle void => *. Käytä sitä animoidaksesi elementtejä niiden lisäämisen yhteydessä.
transition(':enter', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
]):leave-alias
:leave on lyhenne ilmaukselle * => void. Angular pitää elementin DOM:ssa, kunnes poistumisanimaatio päättyy.
transition(':leave', [
animate('300ms', style({ opacity: 0 }))
])Käynnistäminen ohjausvirralla
Liitä trigger @if- tai @for-rakenteen hallitsemiin elementteihin. Niiden lisääminen tai poistaminen käynnistää sisääntulo- tai poistumisanimaation.
@if (visible()) {
<div [@fade]>Hello</div>
}Häivytystriggeri
Tässä on uudelleenkäytettävä sisään- ja uloshäivytystriggeri.
trigger('fade', [
transition(':enter', [
style({ opacity: 0 }),
animate('200ms', style({ opacity: 1 }))
]),
transition(':leave', [
animate('200ms', style({ opacity: 0 }))
])
])Esimerkki sisään liukumiseen
Yhdistä transform ja opacity sisääntulon liukumistehostetta varten.
transition(':enter', [
style({ transform: 'translateY(-10px)', opacity: 0 }),
animate('250ms ease-out',
style({ transform: 'translateY(0)', opacity: 1 }))
])Listan alkioiden animaatiot
Sijoita trigger jokaiselle @for-rakenteen sisällä olevalle alkiolle. Alkioiden lisääminen ja poistaminen animoi kunkin niistä itsenäisesti.
@for (item of items(); track item.id) {
<li [@fade]>{{ item.name }}</li>
}Miksi poistuminen tarvitsee moottorin
Normaalisti poistettu elementti katoaa välittömästi. Animaatiomoottori keskeyttää poiston, säilyttää solmun, suorittaa :leave-animaation ja poistaa solmun vasta sen jälkeen – kaikki automaattisesti.
Animaatioiden poistaminen käytöstä
Sido @.disabled animaatioiden ehdollista ohittamista varten. Tämä on hyödyllistä esimerkiksi vähäisen liikkeen asetuksen tai ensimmäisen hahmonnuksen yhteydessä.
<div [@.disabled]="prefersReducedMotion">...</div>Parhaat käytännöt
Pidä sisääntulo- ja poistumisanimaatiot lyhyinä ja hienovaraisina. Kunnioita asetusta prefers-reduced-motion. Animoi sujuvuuden takaamiseksi transform- ja opacity-ominaisuuksia (GPU-ystävällisiä) asetteluun vaikuttavien ominaisuuksien sijaan.
Pikatarkistus
Testaa, kuinka hyvin ymmärrät sisään- ja poistumisanimaatiot.
Kertaus
Opit, että :enter (void => *) ja :leave (* => void) animoivat elementtejä niiden lisäämisen ja poistamisen yhteydessä ja toimivat yhdessä @if- ja @for-rakenteiden kanssa. Moottori säilyttää poistuvat solmut, kunnes niiden animaatio valmistuu.
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
- 38
- Oppitunnit
- 144
Usein kysytyt kysymykset
Onko oppitunti ”Elementtien saapumis- ja poistumisanimaatiot” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Elementtien saapumis- ja poistumisanimaatiot”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Elementtien saapumis- ja poistumisanimaatiot”?
Animoikaa elementtien saapumista ja poistumista Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Elementtien saapumis- ja poistumisanimaatiot”-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ä Angular Academy-oppitunnilla?
Kyllä. Jokainen Angular 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
- Animaatioiden perusteet: trigger ja state
- Siirtymät ja ajoitus
- Elementtien saapumis- ja poistumisanimaatiot
- Keyframet ja porrastus