Ariakit
/

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() {
const dialog = Ariakit.useDialogStore();
return (
<>
<Ariakit.Button onClick={dialog.show} className="button">
Show modal
store={dialog}
backdrop={<div className="backdrop" />}
className="dialog"
>
<Ariakit.DialogHeading className="heading">
Success
<p className="description">
Your payment has been successfully processed. We have emailed your
receipt.
</p>
<div>
<Ariakit.DialogDismiss className="button">OK</Ariakit.DialogDismiss>
</div>
</>
);
}

Components

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.

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue