I am trying to create a smooth slide down menu effect, but it seems to instantly expand with no transition. Can anyone help me troubleshoot this issue?
const Container = styled.section`
position: relative;
overflow: hidden;
`
const WrapperItems = styled.div`
padding-left: 2rem;
user-select: none;
transition: all 1s ease-in-out;
position: relative;
height: 0;
&.active {
max-height: 100vh;
height: auto;
}
return (
<Container>
<Wrapper onClick={() => setIsOpen(!isOpen)}>
<div className="title">{title}</div>
</Wrapper>
<WrapperItems className={isOpen ? "active" : ""}>
{items.map(item => (
<div className="item" onClick={() => navigate(item.to)}>{item.title}</div>
))}
</WrapperItems>
</Container>
);