Hvorfor bruge popover?
popover er nyttig, fordi browseren allerede giver dig top layer, light dismiss og en mere robust interaktionsmodel end hjemmerullede overlays med z-index. Det gør den til et godt sted at lære moderne UI-animation, fordi state-skiftet allerede er tydeligt defineret.
Det vigtigste CSS-greb er, at du styler selve elementet med [popover] og den åbne tilstand med :popover-open. Du bør ikke prøve at animere ved manuelt at toggle display selv.
Basismønstret: base state, åben state og @starting-style
Step-øvelsen viser den mindste nyttige model:
- Sæt udgangspunktet på
[popover], fx lavere opacity og en lille translate. - Sæt den synlige tilstand på
&:popover-open. - Brug
@starting-style, så browseren har et startpunkt at animere fra, når popoveren kommer ind i top layer.
@starting-style er altså den første frame i enter-animationen, ikke den state elementet bliver stående i.
Fra step til rigtigt pattern
Hvis du vil have en mere komplet entry/exit-animation, er det ikke nok kun at tweene opacity. Her bliver transition-behavior, overlay og ofte ::backdrop også relevante, fordi popoveren både skifter display og flyttes ind i top layer.
transition-behavior: allow-discrete gør, at diskrete properties som display og overlay kan indgå i transitionen i stedet for bare at skifte momentant.
Det er præcis den retning, der beskrives i Steal This Popover Starter Kit: brug diskrete transitions til de ting, browseren ellers normalt ville skifte momentant, og behold @starting-style til første frame.
En god mental model er derfor:
[popover]= base state:popover-open= på scenen@starting-style= lige inden popoveren kommer på scenen::backdrop= det visuelle lag bag popoveren