Styling og animation af popovers

Hvis du kun husker én ting: Start med klare lukkede og åbne tilstande, og brug først animation når adfærden allerede er tydelig.

Start med lukket og gør åben tilstand tydelig

Et simpelt mønster til styling kan se sådan ud:

[popover] {
  opacity: 0;
  rotate: 360deg;
  transition: 0.5s;
}

:popover-open {
  opacity: 1;
  rotate: none;
}

Her er tanken:

• popoveren har en starttilstand
• når den er åben, får den en ny tilstand
• browseren forsøger så, at animere mellem de to tilstande via transition

@starting-style giver et tydeligere startpunkt

Når et element først dukker op i det øjeblik, det åbnes, er det umuligt for browseren at vide, hvad der skal animeres fra.

Et lille værktøj til det er:

@starting-style {
  opacity: 0;
  rotate: -360deg;
}

Det kan gøre animationen mere stabil og mere forståelig.

Diskrete tilstande kræver lidt ekstra

Popover er ikke bare et element, der hele tiden står på siden. Det skifter også mellem at være lukket og åben som en UI-tilstand.

Derfor ser man ofte:

transition-behavior: allow-discrete;

eller den korte version inde i transition:

[popover] {
  opacity: 0;
  rotate: 360deg;
  transition: 0.5s allow-discrete;
}

:popover-open {
  opacity: 1;
  rotate: none;
}

Demoer

Simpel animation med custom timing-function fra Easing Wizard:

Fuldt eksempel: