Transitioning a popover

When animating popovers with CSS transitions, the following features are required:

• @starting-style at-rule

  Provides a set of starting values for properties set on the popover that you want to transition from when it is first shown. This is needed to avoid unexpected behavior. By default, CSS transitions only occur when a property changes from one value to another on a visible element; they are not triggered on an element's first style update, or when the display type changes from none to another type.

• display property

  Add display to the transitions list so that the popover will remain as display:block (or another visible display value) for the duration of the transition, ensuring the other transitions are visible.

• overlay property

  Include overlay in the transitions list to ensure the removal of the popover from the top layer is deferred until the transition completes, again ensuring the transition is visible.

• transition-behavior property

  Set transition-behavior:allow-discrete on the display and overlay transitions (or on the transition shorthand) to enable discrete transitions on these two properties that are not by default animatable.

For example, let's say the styles we want to transition are opacity and transform: we want the popover to fade in or out while moving down or up.

To achieve this, we set a starting state for these properties on the hidden state of the popover element (selected with the [popover] attribute selector) and an end state for the shown state of the popover (selected via the :popover-open pseudo-class). We also use the transition property to define the properties to animate and the animation's duration as the popover gets shown or hidden:

/*** Transition for the popover itself ***/
[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);
}
[popover] {
  transition: all 0.2s allow-discrete;
  /* Final state of the exit animation */
  opacity: 0;
  transform: translateY(-3rem);
}
[popover]:popover-open {
  opacity: 1;
  transform: translateY(0);
}
/* Needs to be after the previous [popover]:popover-open rule
to take effect, as the specificity is the same */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: translateY(-3rem);
  }
}

/*** Transition for the popover's backdrop ***/
[popover]::backdrop {
  /* Final state of the exit animation */
  background-color: rgb(0 0 0 / 0%);
  transition: all 0.2s allow-discrete;
}
[popover]:popover-open::backdrop {
  background-color: rgb(0 0 0 / 15%);
}
@starting-style {
  [popover]:popover-open::backdrop {
    background-color: rgb(0 0 0 / 0%);
  }
}

You can see a working example of this in the demo at the beginning of the page.

So it is possible for the style transition on entry and exit to be different.

PopButton

Pop

Mouse interaction

• Clicking a PopButton will trigger the button action (open, close, or toggle state).

• Clicking outside of a Popover will close all the Popover with mode="auto".

Keyboard interaction

• Pressing the Enter or Space keys on a PopButton will trigger the button action (open, close, or toggle state), and close all the Popover with mode="auto".

• Pressing the Escape key will close all the Popover with mode="auto".