Keyframe animations are a great way to add smooth transitions between the closed and shown states of <dialog> and <popover>. This approach has several advantages:
- No need to provide a
@starting-style.
- No need to explicitly enable discrete animations.
- Unlike
transition, animation is supported by all major browsers for shown states; only the closed state animations are currently limited to Chromium-based browsers.
For the shown state, no additional work is needed as animations work out of the box. However, for the closed state, adding the display property to the out animation is required, as shown in this example:
.animate-slide-up-down {
/* motionOK */
@media (prefers-reduced-motion: no-preference) {
animation: slide-out-down 0.5s var(--ease-3);
&:popover-open {
/* Built-in animation from Open Props */
animation: var(--animation-slide-in-up);
}
}
}
@keyframes slide-out-down {
from {
display: block;
}
to {
transform: translateY(100%);
}
}The same applies to fade animations:
.animate-fade-in-out {
opacity: 0;
/* motionOK */
@media (prefers-reduced-motion: no-preference) {
animation: fade-out 0.5s var(--ease-3) forwards;
&:popover-open {
/* Built-in animation from Open Props */
animation: var(--animation-fade-in) forwards;
}
}
}
@keyframes fade-out {
from {
display: block;
opacity: 1;
}
to {
opacity: 0;
}
}See this example on CodePen and click one of the cards to view the animations live:
https://codepen.io/mobalti/pen/EaYVJgr
Summary
To handle animations when dialogs and popovers are closed, we can either:
- Update the current "out" animation props by adding the
display property to the keyframes (if there are no side effects).
- Create new "out" animation props specifically for handling the closed state.
Keyframe animations are a great way to add smooth transitions between the closed and shown states of
<dialog>and<popover>. This approach has several advantages:@starting-style.transition,animationis supported by all major browsers for shown states; only the closed state animations are currently limited to Chromium-based browsers.For the shown state, no additional work is needed as animations work out of the box. However, for the closed state, adding the
displayproperty to theoutanimation is required, as shown in this example:The same applies to fade animations:
See this example on CodePen and click one of the cards to view the animations live:
https://codepen.io/mobalti/pen/EaYVJgr
Summary
To handle animations when dialogs and popovers are closed, we can either:
displayproperty to the keyframes (if there are no side effects).