CSS-nyckelbildsanimationer med React

En @keyframes-regel beskriver en animering i flera steg genom att ange egenskapsvärden vid olika punkter längs en tidslinje, med from/to eller procenttal som 0%, 50%, 100%.

Till skillnad från transitions kan keyframes beskriva komplexa rörelser i flera steg som körs på egen hand utan en tillståndsändring vid varje steg.

Du tillämpar en keyframe-uppsättning med egenskapen animation: animation: slideIn 400ms ease forwards. Den samlar namn, varaktighet, tidsfunktion och fyllningsläge.

Fyllningsläget forwards behåller elementet vid värdena i den sista keyframen efter att animeringen är slut, vilket förhindrar ett hopp tillbaka till början.

I React lägger du vanligtvis till en klass som innehåller animation-deklarationen när tillståndet blir true. Till exempel startar keyframes genom att lägga till is-entering i samma ögonblick som elementet monteras eller en flagga växlar.

Detta håller animeringslogiken i CSS, medan React bara avgör när klassen ska läggas till.

animation-fill-mode styr vilka stilar som gäller före och efter att animeringen körs. forwards behåller den sista keyframen, backwards tillämpar den första keyframen under en eventuell fördröjning, och both gör båda sakerna.

Utan forwards skulle ett element som animeras från osynligt till synligt hoppa tillbaka till osynligt när animeringen är klar.

animation-direction: alternate spelar animeringen framåt och sedan bakåt vid varje iteration. I kombination med animation-iteration-count: infinite skapar den en mjuk rörelse fram och tillbaka, som en pulserande eller andande effekt.

Detta är praktiskt för laddningsindikatorer eller diskreta rörelser som drar till sig uppmärksamhet.

animation-play-state kan vara running eller paused. Ni kan styra det från React-tillståndet, till exempel pausa en rullande text när pekaren förs över den genom att byta klass.

Eftersom animeringen pausas i stället för att återställas fortsätter den exakt där den stannade.

En keyframe-animering spelas bara upp en gång när dess klass tillämpas första gången; att lägga till samma klass igen startar inte om den. Det renaste React-tricket är att ändra elementets key så att React monterar om en ny nod och spelar upp animeringen från början.

Om Ni till exempel använder key={count} på en toast monteras den om varje gång count ökar.

Vissa användare aktiverar reducerad rörelse i operativsystemet av bekvämlighets- eller tillgänglighetsskäl. Omslut icke-nödvändiga animeringar i @media (prefers-reduced-motion: reduce) och inaktivera eller förkorta dem där.

Genom att respektera denna inställning blir gränssnittet mer inkluderande och Ni undviker att orsaka obehag.

För att animera element när de kommer in i visningsområdet använder Ni en IntersectionObserver i en useEffect. När elementet blir synligt uppdaterar Ni tillståndet, vilket lägger till animeringsklassen.

Detta skapar effekter där element visas vid rullning utan tunga rullningslyssnare som körs vid varje bildruta.

animation-delay sprider ut när varje keyframe-animering börjar. Om Ni ger en lista med objekt allt längre fördröjningar animeras de i följd och skapar en koreograferad visning.

Ni kan beräkna fördröjningen för varje objekt i React med style={{ animationDelay: i * 80 + 'ms' }}.

Använd transitions för enkla ändringar mellan två tillstånd som styrs av interaktioner, och keyframes när Ni behöver rörelser i flera steg, upprepning eller en animering som körs oberoende av en tillståndsväxling.

Båda är ren CSS, så React avgör bara när klasserna kopplas till och webbläsaren hanterar bildrutorna.

Ni har lärt Er att definiera @keyframes, tillämpa dem med den förkortade egenskapen animation, styra fyllningsläge och riktning, pausa och utlösa animeringar igen samt visa element vid rullning med IntersectionObserver.

Ni har också sett hur man respekterar prefers-reduced-motion för tillgängliga rörelser.