Animated Select
Animating Select using CSS transitions in React. The component waits for the transition to finish before completely hiding the popover.
Components
Styling the animation
Use the data-enter
and data-leave
attributes to animate the SelectPopover
component using CSS transitions:
.popover {
opacity: 0;
transition: opacity 150ms;
}
.popover[data-enter] {
opacity: 1;
}
For more information on styling with Ariakit, refer to the Styling guide.