Hi,
The first thing to know about transitions is that not all properties are animatable because some only have 2 states.
Your menu is hidden with display:none and display is not one of the properties that can be animated. If an element is display:none
then the element is gone immediately; there is no half way house between being block and none (unlike opacity where you can go from zero to 100%).
Also there is no way to animate/transition an element to auto states so you can’t animate from say height:0 to height:auto.
If you want to hide something and then show it with a transition effect then you have to be more creative and perhaps hide off-screen instead of display:none and then bring it back on screen and you can animate the movement.
For your example you could add the following changes.
.Navbar__Items {
/*display:none;*/
width:0;/* added*/
max-height:0;/* added*/
overflow:hidden;
}
.Navbar__ToggleShow {
display: flex;
flex-direction: column;
max-height:none;/* added*/
width: 100%;
flex-basis: 100%;
}
That will give you a little bit of text-animation when the menu is toggled. You could also experiment with opacity and other methods of hiding.
If you actually meant you wanted a delay when the hamburger was clicked then that would be very odd and feel like it was not working and I would advise against that.