UI-animation: @property i praksis

Hvorfor er @property nyttig?

Normale custom properties er simple tekststrenge. Browseren ved ikke af sig selv, om --offset er en længde, en farve, en procent eller noget helt fjerde. Derfor kan den heller ikke altid interpolere værdien glidende i en transition eller animation.

@property løser det ved at registrere en custom property med type, default-værdi og arveadfærd. Det gør især tre ting nyttige i animation:

• browseren kan interpolere mellem værdier af samme type
• du får en initial-value, så systemet har en stabil fallback
• du kan styre om værdien skal arve med inherits

Syntaksen er som følger:

@property --my-property {
  syntax: "<length>"; /* eller <color>, <percentage>, etc. */
  initial-value: 0px; /* eller en anden passende default */
  inherits: true; /* eller false, alt efter behov */
}

Fra rå variabel til animerbar længde

I denne øvelse registreres --offset som en <length>. Det gør, at den kan tweenes glidende og bruges direkte i translate.

Pointen er, at @property ikke bare er “syntaks ovenpå” custom properties. Det er det, der gør browseren i stand til at forstå og animere værdien som en rigtig længde.

Gradienter er et godt sted at mærke forskellen

Typed custom properties er især nyttige i gradients, fordi stop, vinkler og farver ellers hurtigt bliver meget “streng-baserede”.

Her bruges en typed procentværdi til at styre et gradient-stop:

Og her bruges typed værdier som del af et mere deklarativt gradient-switch, hvor én prop styrer, hvor skiftet ligger:

Et praktisk tip er at sætte inherits: false, når en property kun skal gælde lokalt i komponenten og ikke sive ned gennem hele subtree’et.