CSS transitions
I have an unordered list that looks like
i'm doing mobile first design and i have a hamburger icon and when you click on it, the navbar expands. when the navbar is not expanded, i simply hide the ul by setting its display to none. i want to add a transition when this happens to make sure the change is smooth. i tried to add a transition on the ul but that didn't work and i'm unsure what to do
3 Replies
Here’s a more visual representation
it's not possible to transition display: none.
it is removed from the dom, so there is not start state and it will just pop into existence.
What you can do is use grid to transition the height of the ul from 0 to auto
here an article on how to do that
https://www.webbae.net/hub/css-hack-animate-height-from-0-to-auto
Oh okay, gotcha
Thank you