{
  "$type": "site.standard.document",
  "description": "Transition a popover in and out of the top layer penthouse",
  "path": "/steal-this-popover-starter-kit",
  "publishedAt": "2024-03-15T03:45:30.763Z",
  "site": "at://did:plc:jnj7wcwuvspxdsipmecmx7rs/site.standard.publication/self",
  "tags": [
    "blog",
    "css",
    "html"
  ],
  "textContent": "Popovers are pretty rad, as are dialogs , but animating them isn't easy. the browser toggles display the elements enter and exit the top layer (aka: the DOM penthouse) Popovers are basically being appended or removed , and display is toggled between block and none . Ew, how do we deal with that? Steal this basic setup # This next section is optimized for you to steal, but you can also just peep the Codepen and take it from there. HTML # Button that opens the popover: < button popovertarget = \"my-tooltip\" >?</ button > The [popover] : < p id = \"my-tooltip\" popover>tip</ p > CSS # This is a bit tricky. At least I think so. [ popover ] { &, & : :backdrop { transition: display 0.5 s allow-discrete , overlay 0.5 s allow-discrete , opacity 0.5 s ; opacity : 0 ; } & ::backdrop { background : black ; } &: popover-open { opacity : 1 ; & : :backdrop { opacity: 0.5 ; } } @starting-style { &: popover-open , &: popover-open ::backdrop { opacity : 0 ; } } } CSS snippet explained # This isn't a deep dive, find a good one from Una here , but is a 2m overview. Transition setup # sets any popover and their backdrops to 0 opacity sets up a transition for that opacity with a matching duration to opacity, display and overlay use a new keyword allow-discrete that signals these properties toggle any new values after the duration has run [ popover ] { &, & : :backdrop { transition: display 0.5 s allow-discrete , overlay 0.5 s allow-discrete , opacity 0.5 s ; opacity : 0 ; } } Display and entering/exiting the top-layer will now only change after opacity has finished fading Popover showing # sets any popover to opacity 1 when :popover-open sets the backdrop to half opacity [ popover ] { & : popover-open { opacity: 1 ; & : :backdrop { opacity: 0.5 ; } } } Entry animation prep # Since popovers enter the top layer, and we're using transitions, we need a way to tell the browser what styles to start the transition from. Enter @starting-style When the popover is opened Start the backdrop and popover with opacity 0 [ popover ] { @ starting-style { & : popover-open , &:popover-open::backdrop { opacity: 0 ; } } } This will then transition from the starting style, to the popover showing styles. JS # Nothing to see here. Try it # See the Pen by Adam Argyle ( @argyleink ) on CodePen . try the Popopver Starter notebook",
  "title": "Steal this popover code"
}