Skip to content

Commit

Permalink
Update files/en-us/web/css/@starting-style/index.md
Browse files Browse the repository at this point in the history
  • Loading branch information
estelle authored Nov 13, 2024
1 parent d8ddeae commit bd90afb
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion files/en-us/web/css/@starting-style/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,7 @@ We then set a {{cssxref("transition")}} property to animate between the two stat
Because the animated element is being promoted to the {{glossary("top layer")}} when shown and removed from the top layer when hidden (with {{cssxref("display", "display: none")}}), some extra steps are required to ensure the animation works in both directions:

- `display` is added to the list of transitioned elements to ensure the animated element is visible (set to `display: block` or another visible `display` value) throughout both the entry and exit animations. Without this, the exit animation would not be visible; in effect, the popover would just disappear. Note that the {{cssxref("transition-behavior", "transition-behavior: allow-discrete")}} value is also set in the shorthand to activate the animation.
- {{cssxref("overlay")}} is added to the list of transitioned elements to ensure that the removal of the element from the top layer is deferred until the animation ends. This doesn't make a huge difference for basic animations such as this one, but in more complex cases, not doing this can result in the element being removed from the overlay too quickly, meaning the animation is not smooth or effective. Again, `transition-behavior: allow-discrete` is required in this case for the animation to occur.
- {{cssxref("overlay")}} is added to the list of transitioned elements to ensure that the removal of the element from the top layer is deferred until the animation ends. This doesn't make a huge difference for animations such as this one, but in more complex cases, not doing this can result in the element being removed from the overlay too quickly, meaning the animation is not smooth or effective. Again, `transition-behavior: allow-discrete` is required in this case for the animation to occur.

> [!NOTE]
> We've also included a transition on the {{cssxref("::backdrop")}} that appears behind the popover when it opens, to provide a nice darkening animation. `[popover]:popover-open::backdrop` is used to select the backdrop when the popover is open.
Expand Down

0 comments on commit bd90afb

Please sign in to comment.