This site is under construction Subscribe to updates

Animated Dialog

Animating a modal Dialog and its backdrop using CSS. The component waits for the transition to finish before completely hiding the dialog or removing it from the React tree.

The animated prop on the useDialogState hook must be set to true. Ariakit will assign the data-enter and data-leave attributes and wait for the transition to finish before hiding or unmounting the dialog.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { Button } from "ariakit/button";
import {
  Dialog,
  DialogDismiss,
  DialogHeading,
  useDialogState,
} from "ariakit/dialog";
import "./style.css";

export default function Example() {
  const dialog = useDialogState({ animated: true });
  return (
    <>
      <Button onClick={dialog.toggle} className="button">
        Show modal
      </Button>
      <Dialog state={dialog} className="dialog">
        <DialogHeading className="heading">Success</DialogHeading>
        <p className="description">
          Your payment has been successfully processed. We have emailed your
          receipt.
        </p>
        <div>
          <DialogDismiss className="button">OK</DialogDismiss>
        </div>
      </Dialog>
    </>
  );
}

Styling

Use the data-enter and data-leave attributes to animate the dialog and the backdrop elements:

[data-backdrop] {
  opacity: 0;
  transition: opacity 200ms;
}

[data-backdrop][data-enter] {
  opacity: 1;
}

.dialog {
  transform: scale(0.9);
  transition: transform 200ms;
}

.dialog[data-enter] {
  transform: scale(1);
}

Learn more in Styling.