Transition property seems to not work no matter what

Question

So im working on a project for college, and the transition is not working on the dropdown nav bar. I tried changing the css code but it just seems to not work no matter what. I started a webpage just to see if I can do it here, but nope I was wrong. Maybe theres a problem with the ordering or something else, I just cant seem to figure. Been doing this for days and still no effect on that simple dropdown navbar and it drives me crazy.

When I click on the checkbox it should play a very minimalistic effect, but nothing. Heres the link for that new webpage, any help is appreciated!

Webpage

But here is the code if you dont mind downloading:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="1.css">
    <title>Document</title>
</head>
<body>
    <div class="div2">
    </div>
    <nav>
        <input type="checkbox" id="navtoggle" class="navtoggle">
        <label for="navtoggle"><img src="hamburger2.png" alt="ham" class="pic1" width="20"></label>
        <div class="div1">
            <ul>
                <li><a href="2.html">First page</a></li>
                <li><a href="2.html">Second page</a></li>
                <li><a href="2.html">Third page</a></li>
            </ul>
        </div>
    </nav>
</body>
</html>

CSS

body
{
    background-color: brown;
    margin: 0;
    padding: 0;
    position: relative;
    height: 300px;
}

.pic1 
{
    position: absolute;
    z-index: 10;
    top: 18px;
    left: 10px;
}

.div2
{
    top:0;
    position: absolute;
    height: 50px;
    width: 100%;
    background-color: green;
}

.navtoggle
{
    position: absolute;
    top: 20px;
    z-index: 4;
    display: none;
}

.navtoggle:checked ~ .div1
{
    height: max-content;
    display: none;
    transition: 1s;
}




.div1, ul
{
    position: relative;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    top: 50px;
    background-color: yellowgreen;
}

ul
{
    top: 0px;
    display: block;
    margin:0;
    padding:0;
    width: max-content;
}

li
{
    list-style-type: none;
    padding:10px 0 10px 0 ;
}

li a
{
    color: brown;
    text-decoration: none;
}


.div1 ul li a
{
    position: relative;
    text-decoration: none;
}
.div1 ul li a:hover
{
    color:grey;
    transition: 0.4s;
}

score 1 · Answer 1 · answered Dec 10 '20 at 18:10

1

The problem is that you toggle display: none/display: block. But this can't be animated.

So you first have to do the animation, and after the animation you can set display: none.

answered Dec 10 '20 at 18:10

Steve Maris

957
9
15

In which order should I do that? Becuase if I remove the `display:none;` then it doesnt toggle the div to appear and disappear of course. – Idontknowhowtocode Dec 10 '20 at 19:01
What is the effect you would like to achieve? Just a fade-in-out, then you can transition 'opacity: 0' to 'opacity: 1'? If you really need it to be 'display: none' then you could add an extra class after the animation finished. – Steve Maris Dec 10 '20 at 21:15
Something like an ease-in and ease-out effect, but I fixed it with positioning the div outside of the visible area of the monitor, With `position:absolute; left:-100%; ` And then adding the left property back `left:0px;` Now its evident that you cant add animations to `display:none;`, but a few hours ago it was not. Thanks for help! – Idontknowhowtocode Dec 10 '20 at 22:35

Transition property seems to not work no matter what

1 Answers1