ReactJs DropDown Menu, increase and decrease height animation - css

Question

Hello I have the following objective, I'm trying to make a height increase effect and the reverse effect with the keyframes:
like this:
and so far I only got the effect by opening, and I'm not able to do the reverse transition effect, that is, when closing, gradually decrease the height
i get this:
code:
JSX:
const MenuItem = ({ key, index, tag, setVisible, visibleMenu }) => {
const { name, dropdownItems, icon } = tag;
const handleClick = index => {
if (visibleMenu === true) return setVisible("none");
if (visibleMenu === index) return setVisible("none");
return setVisible(index);
};
return (
<ListItem active={visibleMenu}>
<div
onClick={() => {
handleClick(index);
}}
className="li-menuOpen"
>
<a>
<FontAwesomeIcon
className="icon-li"
icon={icon}
size={"lg"}
fixedWidth
color="white"
/>
<span
className="li-name"
onClick={() => {
handleClick(index);
}}
>
{name}
</span>
</a>
<span className="svg-arrow">
{dropdownItems ? (
<FontAwesomeIcon
className="down-up_svg"
icon={visibleMenu ? faAngleUp : faAngleDown}
size="1x"
fixedWidth
color="white"
/>
) : (
""
)}
</span>
</div>
{dropdownItems ? (
<DropDown list={dropdownItems} active={visibleMenu} />
) : (
""
)}
</ListItem>
);
};
export default function App() {
const MenuTags = [
{
name: "Carteira",
link: "../cartcredit",
icon: faWallet,
dropdownItems: [
{ name: "Histórico", link: "/history" },
{ name: "Adicionar Crédito", link: "/add" }
]
}
];
const [visible, setVisible] = useState(null);
return (
<MenuList>
{MenuTags.map((item, index) => (
<MenuItem
key={index}
index={index}
tag={item}
setVisible={setVisible}
visibleMenu={visible === index ? true : false}
/>
))}
</MenuList>
);
}
DropDown JSX and CSS WITH EMOTION
const increaseHeightDrop = keyframes`
from {
max-height: 0;
}
to {
max-height: 500px;
}
`;
const decreaseHeight = keyframes`
from {
max-height: 500;
}
to {
max-height: 0px;
display:none;
}
`;
const OpenedStyled = styled.ul`
${props => {
if (props.active) {
return css`
animation: ${decreaseHeight} 0.8s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
`;
}
}}
overflow: hidden;
animation: ${increaseHeightDrop} 0.8s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
padding: 7px 15px;
background: #307096;
li {
white-space: nowrap;
padding: 5px 5px 5px 0px;
}
a {
font-family: "Ubuntu";
font-size: 14px;
font-weight: 300;
text-decoration: none;
color: #fff;
}
& .li-open:hover > .icon-li-drop {
color: orange;
}
& .icon-li-drop {
margin-right: 10px;
}
`;
const OpenedSide = ({ open, active, list }) => {
return (
<>
{active ? (
<OpenedStyled open={open} active={active}>
{list.map(item => (
<li className="li-open" key={item.name}>
<FontAwesomeIcon
className="icon-li-drop"
icon={faCircleNotch}
size="1x"
fixedWidth
color="white"
/>
<a>{item.name}</a>
</li>
))}
</OpenedStyled>
) : (
""
)}
</>
);
};
const DropDown = ({ active, list }) => {
console.log(list);
return <OpenedSide active={active} list={list} />;
};
export default DropDown;
example:
https://codesandbox.io/s/purple-silence-ytc5h?file=/src
In my codesand box I have a working example,
basically i just have difficulties in how i can make the transition when closing the dropdown, if anyone has any better idea for the code i would be grateful