Animated Combobox
Animating a Combobox using CSS transitions in React. The component waits for the transition to finish before completely hiding the popover using the animated
prop.
import "./style.css";
import * as Ariakit from "@ariakit/react";
export default function Example() {
return (
<div className="wrapper">
<label className="label">
Your favorite fruit
</label>
🍎 Apple
🍇 Grape
🍊 Orange
🍓 Strawberry
🍉 Watermelon
</div>
);
}
Components
Styling
When the animated
prop is set to true
on the ComboboxProvider
component, Ariakit will assign the data-enter
and data-leave
attributes to the popover. You can use these attributes as selectors to add CSS transitions to the popover.
.popover {
opacity: 0;
transition: opacity 150ms;
}
.popover[data-enter] {
opacity: 1;
}
Learn more on the Styling guide.
Follow updates
Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.