React - slide down menu reveal menu items on hover - css

Question

I am trying to add a dropdown menu slide down that slowly reveals the menu items. I am using CSSTransition from react-transition-group. I have the blue background doing the nice slow slidedown that I want. But the text items just instantly shows up. Here is my codesandbox showing the issue: https://codesandbox.io/s/compassionate-dawn-zbmt5
My Navbar component:
import { Link } from "react-router-dom";
import React, { useState } from "react";
import { CSSTransition } from "react-transition-group";
const Navbar = () => {
const [showSchedDropdown, setShowSchedDropdown] = useState(false);
return (
<ul className={"nav"}>
<li
className={"nav-item dropdown"}
onMouseEnter={() => setShowSchedDropdown(true)}
onMouseLeave={() => setShowSchedDropdown(false)}
>
<button
className={"nav-link dropdown-toggle"}
aria-haspopup={"true"}
aria-expanded={"false"}
onClick={() => setShowSchedDropdown(true)}
>
Dropdown Menu
</button>
<CSSTransition
in={showSchedDropdown}
timeout={1300}
classNames={"hidden-menu"}
>
<div className={"dropdown-menu"}>
{showSchedDropdown && (
<>
<Link
className={"dropdown-item"}
to={"/baglines"}
onClick={() => setShowSchedDropdown(false)}
>
Menu Item 1
</Link>
<Link
className={"dropdown-item"}
to={"/totelines"}
onClick={() => setShowSchedDropdown(false)}
>
Menu Item 2
</Link>
<Link
className={"dropdown-item"}
to={"/otherlines"}
onClick={() => setShowSchedDropdown(false)}
>
Menu Item 3
</Link>
</>
)}
</div>
</CSSTransition>
</li>
</ul>
);
};
export default Navbar;
And the CSS:
.dropdown-menu {
display: block;
margin-top: 0;
padding-top: 0;
color: #ffffff;
background-color: rgba(#265077, 1);
font-size: 0.9rem;
border: none;
transition: height 1.3s ease;
&.hidden-menu-enter,
&.hidden-menu-exit-done {
height: 0;
transition: height 1.3s ease;
}
&.hidden-menu-enter-active {
height: 100px;
transition: height 1.3s ease;
}
&.hidden-menu-enter-done {
height: 100px;
}
&.hidden-menu-leave {
height: 0;
transition: height 1.3s ease;
}
&.hidden-menu-leave-active {
height: 100px;
transition: height 1.3s ease;
}
}