I am working on animating the width of a child component's div. Here is my simple code:
export const OuterComponent = () => {
const sidebarCtx = useContext(SidebarContext);
const style =
"w-[100px] h-[60px] transition-all duration-1000 bg-purple-900 text-2xl text-white " +
(sidebarCtx.isOpen ? " w-[400px] " : "");
const InnerComponent = ({ children }) => {
return (
<div className={style}> // applying style directly to this div prevents transition from working
{children}
<a>testing</a>
</div>
);
};
return (
<div className={style}> // applying style here and removing it from InnerComponent allows transition to work normally
<InnerComponent />
</div>
);
};
The issue, as described in the code comments, lies in the fact that applying style directly to InnerComponent causes the width change to not animate.