CSS Transition not working - Using radio button as a show/hide

Question

Hello everyone this may seem easy to many people, But I just don't get it why transition is not working when I click the radio button to show the hidden side nav.
So I am creating a side nav using only html and css and I found out the I can use radio button as a way to show and hide content. I accomplished the show and hide part but then I decided to put a transition css so that after I click the show button it will not show instantly but with transition same goes with the hide/close button.

Below is my code snippet

*{
    padding: 0;
    margin: 0;
}
.nav {
    display: none;
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 5s ease-in;
    padding-top: 60px;
    color: white;
    
}
#show:checked ~ .nav {
    display: block;
    z-index: 1;
    width: 250px;
    -webkit-transition: all 1s linear;
   -moz-transition: all 1s linear;
   -ms-transition: all 1s linear;
   -o-transition: all 1s linear;
   transition: all 1s linear;
}
#close:checked ~ .nav {
    display: none;
   background: rgb( 40, 44, 47 );
   
   opacity: 0.7;
   -webkit-transition: all 1s linear;
   -moz-transition: all 1s linear;
   -ms-transition: all 1s linear;
   -o-transition: all 1s linear;
   transition: all 1s linear;
}

<header class="header">
        <input type="radio" name="side" id="show">show
        <nav class="nav">
            <ul>
                <input type="radio" name="side" id="close">close
                <li>Home</li>
                <li>About</li>
                <li>Task sheets</li>
                <li>Poftfolio</li>
                <li>Contacts</li>
            </ul>
        </nav>
    </header>
    <h1>Hello</h1>

Raul Sauco · Accepted Answer · 2020-12-25T15:34:53.043

There is no transition because you use display: none; on the element when it is hidden.

The element does not exist in the DOM when its display value is set to none.

When the checkbox gets checked, you give the nav a width of 250px and add it to the DOM. But it is added like that, with a width of 250px. Remove display: none from the .nav element and the transitions apply.

*{
    padding: 0;
    margin: 0;
}
.header {
 transition: 2s ease-in-out all;
}
.nav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: all 1s ease-in-out;
    padding-top: 60px;
    color: white;
    
}
#show:checked ~ .nav {
    display: block;
    z-index: 1;
    width: 250px;
}
#close:checked ~ .nav {
    display: none;
   background: rgb( 40, 44, 47 );
   
   opacity: 0.7;
}

<header class="header">
        <input type="radio" name="side" id="show">show
        <nav class="nav">
            <ul>
                <input type="radio" name="side" id="close">close
                <li>Home</li>
                <li>About</li>
                <li>Task sheets</li>
                <li>Poftfolio</li>
                <li>Contacts</li>
            </ul>
        </nav>
    </header>
    <h1>Hello</h1>

Keep in mind that your HTML is not valid. input is not a valid child of ul, so the behavior may not be reliable. Check the MDN docs.

score 1 · Answer 2 · answered Dec 25 '20 at 15:28

Its not really working because you're using display property which is not allowed to be animated. Instead of doing so you can really create something with opacity, transform and etc.

Also to prevent dbl clicking you can use pointer-events. Here are the docs for it: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

I've created for you little code pen to really know whats happening. https://codepen.io/snoh666/pen/VwKrbeR

CSS Transition not working - Using radio button as a show/hide

2 Answers2