Animated Dialog
Animating a modal Dialog and its backdrop
element using CSS. The component waits for the transition to finish before completely hiding the dialog or removing it from the React tree.
import * as Ariakit from "@ariakit/react";
import "./style.css";
export default function Example() {
return (
<>
Show modal
className="dialog"
>
Success
<p className="description">
Your payment has been successfully processed. We have emailed your
receipt.
</p>
<div>
</div>
</>
);
}
Styling
Use the data-enter
and data-leave
attributes to animate the dialog and the backdrop elements:
.backdrop {
opacity: 0;
transition: opacity 200ms;
}
.backdrop[data-enter] {
opacity: 1;
}
.dialog {
transform: scale(0.95);
transition: transform 200ms;
}
.dialog[data-enter] {
transform: scale(1);
}
You can learn more about these data-*
attributes on the Styling guide.
Follow updates
Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.