This site is under construction Subscribe to updates

Animated Select

Animating Select using CSS transitions in React. The component waits for the transition to finish before completely hiding the popover.

The animated prop on the useSelectState 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 select popover.

Favorite fruit

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
31
32
import {
  Select,
  SelectItem,
  SelectLabel,
  SelectPopover,
  useSelectState,
} from "ariakit/select";
import "./style.css";

export default function Example() {
  const select = useSelectState({
    defaultValue: "Apple",
    animated: true,
    sameWidth: true,
    gutter: 4,
  });
  return (
    <div className="wrapper">
      <SelectLabel state={select}>Favorite fruit</SelectLabel>
      <Select state={select} className="select" />
      {select.mounted && (
        <SelectPopover state={select} portal className="popover">
          <SelectItem className="select-item" value="Apple" />
          <SelectItem className="select-item" value="Banana" />
          <SelectItem className="select-item" value="Grape" />
          <SelectItem className="select-item" value="Orange" />
        </SelectPopover>
      )}
    </div>
  );
}

Styling

Use the data-enter and data-leave attributes to animate the popover:

.popover {
  opacity: 0;
  transition: opacity 150ms;
}

.popover[data-enter] {
  opacity: 1;
}

Learn more in Animating.