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•7mo ago

Here’s a more visual representation

MarkBoots•7mo 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

CSS Hack! Animate Height from 0 to Auto - Web Bae Code Boost for We...

sohunn•7mo ago

Oh okay, gotcha Thank you

Gaming

Programming

CSS transitions