Hi,
As Ryan said you can’t use display:none but you can hide it offscreen but only animate the opacity.
Here’s a codepen I knocked up the other week for a similar question…
I used a small top position animation for the first level and then animated the margin for the second level (although translate would be better but means the menu wont work in older browsers).
When the menu is hidden the left offscreen position is delayed until the animation is complete so it all looks smooth.