Click event produces different transition delays, despite equal values - reactjs

Question

I am creating a simple Dropdown menu in React. The initial event of the drop down works as expected. However, when retracting the dropdown there is a noticeable delay in the transition despite equal default values.
The CSS transition properties are identical so I am not sure why there is a delay. I have also set the transition delay value of both explicitly to 0, to be sure.
here is the component
class DrawerLink extends React.Component {
constructor() {
super();
this.state = { collapse: false };
this.handleLinkToggle = this.handleLinkToggle.bind(this);
}
handleLinkToggle(e) {
this.setState({ collapse: !this.state.collapse });
}
render() {
const { collapse } = this.state;
return (
<div className="DrawerLinkContainer">
<div onClick={this.handleLinkToggle}>
<div className="image-container">
<img src="../public/images/user.jpeg" />
</div>
<p>Steave Jobs</p>
</div>
<div
className={
collapse ? "sub-menu-container collapse" : "sub-menu-container"
}
>
<p>First Sub Menu</p>
<p>Second Sub Menu</p>
</div>
</div>
);
}
}
and the CSS:
.sub-menu-container {
padding-left: 40px;
max-height: 0px;
overflow: hidden;
transition: max-height 1s linear 0s;
&.collapse {
max-height: 500px;
transition: max-height 1s linear 0s;
}
p {
padding: 7px 35px 7px 15px;
}
}

Answer 1

Because you have set max-height to 500px and your content is only about 60px, the first transition is still executing causing what seems like a delay. I.E increasing to a "max height" of 500px.
You can see better if you set a background colour on the sub container and set the height equal to the max height in the collapse class. Something like:
.sub-menu-container {
padding-left: 40px;
max-height: 500px;
overflow: hidden;
transition: max-height 1s linear 0s;
background: red;
&.collapse {
max-height: 0px;
}
p {
padding: 7px 35px 7px 15px;
}
}
The real solution is to use an animation library because transitions have issues (they just don't work) when element are removed from the DOM by React.
If you need a solution to your example, you need to know the height of the sub container and use that as a max height. It's not very dynamic though.