Animer transform og opacity - så godt som alltid
Disse to kan animeres av kompositor-tråden alene, uavhengig av hvor komplekst resten av siden er - de tvinger aldri frem layout (reflow) eller full re-tegning på hoved-tråden:
| Du vil... | Bruk | Ikke |
|---|---|---|
| Gjøre noe større/mindre | transform: scale() | width/height/font-size |
| Flytte noe | transform: translate() | top/left/margin |
| Tone noe inn/ut | opacity (evt. kombinert med visibility/display for å fjerne det fra tab-rekkefølgen når usynlig) | visibility alene |
border-radius/background-color/box-shadow er et mellomting - de
trigger kun ny tegning (paint), ikke layout, og er greie å animere i seg selv. Layout-egenskaper som
padding, inset og aspect-ratio bør derimot aldri animeres direkte.
Bruk den delte varighets-tokenen, ikke et eget tidstall
Alle overganger skal bruke var(--transition-duration, 150ms) fra
designsystem/tokens/bevegelse/ i stedet for
å skrive en frittstående millisekund-verdi. Tokenen er allerede koblet til
prefers-reduced-motion: reduce og settes automatisk til 0ms der brukeren har
bedt om mindre bevegelse - en lokal, hardkodet varighet ville ikke fått denne reduksjonen gratis.
Bytte til en reelt annen størrelse/proporsjon - uten å animere selve byttet
Trenger et element å bytte til en annen geometri der en ren scale()-transform ville
forvrengt innholdet (f.eks. et helt annet sideforhold), animer aldri selve layout-egenskapene. Bytt dem i
stedet momentant mens elementet er usynlig, og la kun usynlig-/synliggjøringen (opacity,
evt. en liten scale()) være det brukeren faktisk ser animert:
- Legg til en klasse som toner elementet ned til
opacity: 0. - Vent på at overgangen er ferdig (
transitionend-eventet). - Bytt selve størrelses-/proporsjons-egenskapen momentant, mens elementet fortsatt er usynlig.
- Fjern klassen igjen slik at elementet tones tilbake inn.
Se slides/komponenter/slide-prototype/ (bytte mellom fullskjerm- og mobilramme-modus) for et
etablert eksempel på dette mønsteret i praksis.