CSS-overgange ved ændringer i React-state

En CSS transition interpolerer jævnt en egenskab mellem to værdier over tid i stedet for at skifte øjeblikkeligt. Du erklærer den på elementet med transition: property duration timing-function delay.

I React animerer du normalt ikke inline-værdier manuelt. I stedet skifter du en klasse eller stil med tilstand, og CSS håndterer de mellemliggende billeder for dig.

Det almindelige mønster er at gemme en boolesk værdi i useState og skifte CSS-klasse, når den ændres. Når klassen ændres, får den berørte egenskab en ny værdi, og CSS animerer forskellen.

For eksempel styrer isOpen, om elementet har klassen open, og klassen open angiver en anden højde eller transformering.

En typisk opsætning er const [isVisible, setIsVisible] = useState(false). En knap kalder setIsVisible(v => !v) for at skifte værdien.

Ved at bruge den funktionelle opdatering v => !v undgår du forældet tilstand, når flere opdateringer sættes i kø, så skiftet forbliver pålideligt.

Du opbygger className dynamisk: className={'panel ' + (isVisible ? 'panel--shown' : 'panel--hidden')}. Grundklassen indeholder overgangserklæringen, mens modifikatorklasserne indeholder start- og slutværdierne.

Når du beholder transition på den altid tilstedeværende grundklasse, kører animationen i begge retninger, både ved åbning og lukning.

Du kan animere flere egenskaber på én gang ved at angive dem i en liste: transition: transform 300ms ease, opacity 300ms ease. En indtoning med glidning kombinerer en ændring af opacity med en translateY på transform.

Ved at animere begge dele sammen får du en poleret indgang, hvor elementet glider op, mens det toner ind.

transition-delay udsætter starten på en overgang. Ved at give listeelementer stigende forsinkelser skaber du en forskudt kaskade, hvor hvert element animeres en smule efter det foregående.

I React kan du beregne forsinkelsen inline, for eksempel style={{ transitionDelay: index * 50 + 'ms' }}.

Egenskaben display kan ikke animeres, fordi den ikke har mellemliggende værdier mellem none og block. En overgang af den giver et øjeblikkeligt spring i stedet for en indtoning.

Animer i stedet opacity for den visuelle indtoning, og skift pointer-events: none, så det skjulte element ignorerer klik, mens det er usynligt.

Tidsfunktionen bestemmer, hvordan hastigheden ændrer sig over varigheden. linear bevæger sig med konstant hastighed, ease starter og slutter langsomt, og cubic-bezier(...) lader dig definere en helt tilpasset kurve.

Tilpassede kurver er gode til en kontant eller elastisk fornemmelse, for eksempel cubic-bezier(0.34, 1.56, 0.64, 1) for en let overskridelse.

Du kan gemme varigheder i tilpassede CSS-egenskaber som --speed: 300ms og genbruge dem: transition: opacity var(--speed) ease. Det holder timingen ensartet på tværs af komponenter.

React kan endda sætte variablen inline via style={{ '--speed': '500ms' }}, så egenskaber kan styre animationens timing.

Browsere kan animere transform og opacity på GPU-compositoren uden at genberegne layoutet eller tegne det igen. Animering af egenskaber som width, top eller margin tvinger browseren til at udføre layoutarbejde for hvert billede og kan give hakken.

Når du skal flytte, skalere eller rotere, skal du bruge transform; når du skal tone ind eller ud, skal du bruge opacity.

En pålidelig overgang i React kombinerer en boolesk tilstand, en betinget modifikatorklasse og en grundklasse, der angiver transition på GPU-venlige egenskaber. Tilstanden skifter klassen, og CSS står for animationen.

Det holder dine komponenter deklarative, samtidig med at browseren udnyttes til at skabe jævne bevægelser.

Du har lært at udløse CSS-overgange ved at skifte tilstandsbaserede klasser, animere transform og opacity sammen, forskyde animationer med forsinkelser og undgå at animere display ved at bruge opacity kombineret med pointer-events.

Du har også set tidsfunktioner, varigheder via CSS-variabler og lært, hvorfor GPU-sammensatte egenskaber holder bevægelser jævne.