Animating a Combobox using CSS transitions in React. The component waits for the transition to finish before completely hiding the popover.
The animated
prop on the useComboboxState
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 combobox popover.
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.