CSS transitions

I have an unordered list that looks like
<ul class={`nav-links row ${isExpanded ? '' : 'hidden'}`}>
<li class="nav-link"><a href="/">Home</a></li>
<li class="nav-link"><a href="/">About</a></li>
<li class="nav-link"><a href="/">Contact</a></li>
<li class="nav-link"><a href="/">Login</a></li>
</ul>
<ul class={`nav-links row ${isExpanded ? '' : 'hidden'}`}>
<li class="nav-link"><a href="/">Home</a></li>
<li class="nav-link"><a href="/">About</a></li>
<li class="nav-link"><a href="/">Contact</a></li>
<li class="nav-link"><a href="/">Login</a></li>
</ul>
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
sohunn
sohunn9mo ago
Here’s a more visual representation
MarkBoots
MarkBoots9mo ago
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
sohunn
sohunn9mo ago
Oh okay, gotcha Thank you
Want results from more Discord servers?
Add your server