Animaatioiden perusteet: trigger ja state
Määrittäkää animaatioiden tilat ja triggerit
Animaatioiden perusteet: trigger ja state on ilmainen Angular 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 Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.
Angular-animaatiot
Angularin animaatiojärjestelmä on Web Animations API:n päälle rakennettu deklaratiivinen DSL. Kuvaat tilat ja siirtymät, ja Angular huolehtii ajoituksesta sekä DOM-päivityksistä.
Käyttöönotto
Ota animaatiomoottori käyttöön lisäämällä animaatiot bootstrap-konfiguraatioon.
bootstrapApplication(AppComponent, {
providers: [provideAnimationsAsync()]
});trigger
trigger nimeää animaation ja ryhmittelee sen tilat ja siirtymät. Liität sen elementtiin sidonnalla.
animations: [
trigger('openClose', [
// states and transitions
])
]Tilojen määrittäminen
state yhdistää nimetyn tilan joukkoon CSS-tyylejä, jotka elementillä tulee olla kyseisessä tilassa.
state('open', style({ height: '200px', opacity: 1 })),
state('closed', style({ height: '0px', opacity: 0 }))style-funktio
style ottaa vastaan CSS-ominaisuuksien objektin. Käytä camelCase-avaimia tai lainausmerkeissä olevia CSS-nimiä.
style({ backgroundColor: '#1976d2', transform: 'scale(1)' })Triggerin sitominen
Sido templatessa @triggerName lausekkeeseen, joka palauttaa nykyisen tilan.
<div [@openClose]="isOpen ? 'open' : 'closed'">
Content
</div>Täydellinen trigger
Tässä on trigger, jossa on kaksi tilaa ja niiden välinen siirtymä.
trigger('openClose', [
state('open', style({ height: '200px' })),
state('closed', style({ height: '0px' })),
transition('open <=> closed', animate('300ms ease'))
])Tilan ohjaaminen komponentista
Komponentti vaihtaa vain totuusarvoa tai merkkijonoa, ja Angular interpoloi vastaavien tilatyylien välillä.
isOpen = signal(true);
toggle() { this.isOpen.update(v => !v); }Wildcard-tila
Wildcard-tila * vastaa mitä tahansa tilaa. Se on hyödyllinen oletuksissa sekä myöhemmin käsiteltävissä sisääntulo- ja poistumisanimaatioissa.
state('*', style({ opacity: 1 }))Void-tila
Erityinen void-tila edustaa elementtiä, joka ei ole DOM:ssa. Se muodostaa perustan sisääntulo- ja poistumisanimaatioille.
Miksi deklaratiivisia animaatioita?
Deklaratiiviset animaatiot pitävät ajoituslogiikan poissa komponenteista, integroituvat Angularin elinkaareen ja siivoavat automaattisesti elementtien poistuessa DOM:sta.
Pikatarkistus
Testaa, miten hyvin ymmärrät animaatioiden perusteet.
Kertaus
Opit, että Angular-animaatiot käyttävät trigger-rakennetta, joka sisältää state-määrittelyjä (joista kukin yhdistää nimen style-määrittelyyn) ja joka sidotaan templatessa [@trigger]-syntaksilla. void- ja *-tilat kattavat puuttuvat ja kaikki tilat.
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 ”Animaatioiden perusteet: trigger ja state” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Animaatioiden perusteet: trigger ja state”. 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 ”Animaatioiden perusteet: trigger ja state”?
Määrittäkää animaatioiden tilat ja triggerit 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 1/4.
Kuinka kauan ”Animaatioiden perusteet: trigger ja state”-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