Siirtymät ja ajoitus
Animoikaa tilojen välisiä siirtymiä
Siirtymät ja ajoitus on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.
Animointi tilojen välillä
Tilat kuvaavat, mihin elementti asettuu; siirtymät kuvaavat, miten se liikkuu niiden välillä. transition-funktio yhdistää tilan muutoksen animaatioon.
transition-funktio
transition ottaa vastaan tilanmuutoslausekkeen ja vähintään yhden animaatiovaiheen.
transition('closed => open', animate('300ms'))Suuntatoimijat
Käytä =>-operaattoria yhteen suuntaan ja <=>-operaattoria molempiin suuntiin.
transition('open <=> closed', animate('250ms ease-in-out'))animate-funktio
animate määrittää ajoituksen: keston, valinnaisen viiveen ja lievennyksen. Merkkijonomuoto on "duration delay easing".
animate('500ms 100ms ease-out')Keston yksiköt
Kestoissa voi käyttää yksiköitä ms tai s. Yksikötön luku tulkitaan millisekunneiksi.
animate('0.4s')
animate('400ms')
animate(400)Easing-funktiot
Easing ohjaa kiihtyvyyttä: linear, ease, ease-in, ease-out, ease-in-out tai cubic-bezier().
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)')Sisäiset kohdetyylit
animate voi ottaa toisen style-argumentin, jonka avulla voidaan animoida kohti tyylejä, joita ei ole sidottu nimettyyn tilaan.
transition('* => active', [
animate('300ms', style({ transform: 'scale(1.1)' }))
])Useita vaiheita
Anna vaiheiden taulukko, jos haluat suorittaa sarjan yhden siirtymän sisällä.
transition('closed => open', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
])Wildcard-siirtymät
Käytä *-merkkiä vastaamaan siirtymiä mistä tahansa tilasta tai mihin tahansa tilaan. Se sopii yleisiin sisääntulotehosteisiin.
transition('* => open', animate('200ms'))Aloitustyylit
Pelkkä style() ennen animate()-kutsua määrittää aloituspisteen, minkä jälkeen Angular animoi kohti kohdetilan tyylejä.
transition(':enter', [
style({ opacity: 0 }),
animate('400ms', style({ opacity: 1 }))
])Ajoituksen parhaat käytännöt
Pidä käyttöliittymän siirtymät lyhyinä (150–300 ms), jotta käyttöliittymä säilyy responsiivisena. Käytä pidempiä kestoja laajoihin ja tarkoituksellisiin liikkeisiin. Valitse easing halutun vaikutelman mukaan.
Pikatarkistus
Testaa, miten hyvin ymmärrät siirtymät ja ajoituksen.
Kertaus
Opit, että transition yhdistää tilanmuutokset (operaattoreilla => tai <=>) animate-vaiheisiin. Ajoitusmerkkijono on duration delay easing, ja voit ketjuttaa style- ja animate-vaiheita sarjoiksi.
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 ”Siirtymät ja ajoitus” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Siirtymät ja ajoitus”. 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 ”Siirtymät ja ajoitus”?
Animoikaa tilojen välisiä siirtymiä 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 2/4.
Kuinka kauan ”Siirtymät ja ajoitus”-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