CSS-keyframe-animaatiot Reactilla

@keyframes-sääntö kuvaa monivaiheisen animaation nimeämällä ominaisuuksien arvot aikajanan eri kohdissa käyttäen määritteitä from ja to tai prosenttiosuuksia, kuten 0%, 50% ja 100%.

Toisin kuin siirtymät, keyframe-animaatiot voivat kuvata monimutkaista, useassa vaiheessa tapahtuvaa liikettä, joka käynnistyy itsestään ilman tilan muutosta jokaisessa vaiheessa.

Keyframe-joukko otetaan käyttöön animation-ominaisuudella: animation: slideIn 400ms ease forwards. Se kokoaa yhteen nimen, keston, ajoitusfunktion ja täyttötilan.

forwards-täyttötila pitää elementin viimeisen keyframen arvoissa animaation päätyttyä ja estää sitä hypähtämästä takaisin alkuun.

Reactissa lisätään yleensä animation-määrittelyn sisältävä luokka, kun tila muuttuu todeksi. Esimerkiksi is-entering-luokan lisääminen käynnistää keyframe-animaation heti, kun elementti liitetään tai lippu vaihtuu.

Näin animaatiologiikka pysyy CSS:ssä, ja React päättää vain, milloin luokka lisätään.

animation-fill-mode määrittää, mitkä tyylit ovat voimassa ennen animaation suorittamista ja sen jälkeen. forwards säilyttää viimeisen keyframen, backwards ottaa ensimmäisen keyframen käyttöön viiveen ajaksi ja both tekee molemmat.

Ilman forwards-arvoa näkyväksi animoitu elementti hypähtäisi animaation päättyessä takaisin näkymättömäksi.

animation-direction: alternate toistaa animaation jokaisella kierroksella ensin eteenpäin ja sitten taaksepäin. Yhdessä animation-iteration-count: infinite -arvon kanssa se tuottaa tasaisen edestakaisen liikkeen, kuten sykkivän tai hengittävän vaikutelman.

Tämä sopii hyvin latausilmaisimiin tai hienovaraiseen huomiota kiinnittävään liikkeeseen.

animation-play-state voi olla running tai paused. Sitä voi ohjata React-tilasta esimerkiksi pysäyttämällä marquee-animaation hiiren osoittimen ollessa sen päällä vaihtamalla luokkaa.

Koska animaatio pysähtyy nollautumisen sijaan, se jatkuu täsmälleen siitä kohdasta, jossa se pysähtyi.

Keyframe-animaatio toistuu vain kerran, kun sen luokka lisätään ensimmäisen kerran; saman luokan lisääminen uudelleen ei käynnistä sitä uudelleen. Siisti React-temppu on vaihtaa elementin key-arvoa, jolloin React liittää uuden solmun ja toistaa animaation alusta.

Esimerkiksi key={count} toast-ilmoituksessa liittää sen uudelleen aina, kun count kasvaa.

Jotkut käyttäjät ottavat käyttöjärjestelmässään käyttöön vähäisemmän liikkeen asetuksen mukavuuden tai esteettömyyden vuoksi. Käärikää tarpeettomat animaatiot @media (prefers-reduced-motion: reduce)-mediaehdon sisään ja poistakaa ne käytöstä tai lyhentäkää niitä sen yhteydessä.

Tämän asetuksen kunnioittaminen tekee käyttöliittymästä osallistavamman ja ehkäisee epämukavuutta.

Kun haluatte animoida elementtejä niiden tullessa näkymäalueelle, käyttäkää IntersectionObserver-oliota useEffect-kutsun sisällä. Kun kohde tulee näkyviin, päivitätte tilan, jolloin animaatioluokka lisätään.

Näin saatte vieritettäessä paljastuvia tehosteita ilman raskaita vierityskuuntelijoita, jotka suoritetaan jokaisella ruudulla.

animation-delay porrastaa kunkin keyframe-animaation aloitusajankohtaa. Kun annatte kohdeluettelon viiveiden kasvaa, kohteet animoituvat peräkkäin ja paljastuvat hallitusti.

Voitte laskea viiveen kullekin kohteelle Reactissa käyttämällä style={{ animationDelay: i * 80 + 'ms' }}.

Käyttäkää siirtymiä yksinkertaisiin vuorovaikutuksen aiheuttamiin kahden tilan muutoksiin ja keyframe-animaatioita silloin, kun tarvitsette monivaiheista liikettä, toistuvaa animaatiota tai tilan vaihtamisesta riippumattomasti toimivaa animaatiota.

Molemmat ovat puhdasta CSS:ää, joten React päättää vain, milloin luokat liitetään, ja selain käsittelee ruudut.

Opitte määrittämään @keyframes-säännön, käyttämään sitä animation-lyhytominaisuudella, hallitsemaan täyttötilaa ja suuntaa, pysäyttämään animaatioita ja käynnistämään ne uudelleen sekä paljastamaan elementtejä vieritettäessä IntersectionObserverin avulla.

Näitte myös, miten prefers-reduced-motion-asetusta kunnioitetaan esteettömän liikkeen varmistamiseksi.