Css width transition with click event

Question

I want when I click the menu button, it would expand the width to 300px with smooth transition in 0.5 second but it doesn't work.

var menu = document.querySelector('.menu');

menu.addEventListener('click', () => {
    menu.classList.toggle('active');
})

@import url('https://fonts.googleapis.com/css2?family=Lato&family=Poppins:wght@500&family=Roboto:ital,wght@0,300;0,500;1,100;1,300&display=swap');

html{
    background: linear-gradient(45deg,#a12626 0%,#550bec 100%) no-repeat;
    height: 100%;
}

body{
    font-family: 'Poppins', sans-serif;
}

.container{
    position: relative;
    margin-top: 30%;
}

.menu{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to right, #a12626 0%, #550bec 100%) no-repeat;
    /* border: white solid; */
    /* color: white; */
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 50px;
    cursor: pointer;
    transition: width 2s ease;
}


.menu.active{
    width: 300px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="menu">Menu</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Transition will only work if there is a value in either state. Width `auto` (default) can't be compared to a pixel value as it's not set. So either set an initial width via CSS, or use JS to set the width initially and when toggling. — Rylee, Jul 19 '22 at 04:05
Does this answer your question? [CSS3 Transitions: is there an on click option without using JQuery?](https://stackoverflow.com/questions/11166580/css3-transitions-is-there-an-on-click-option-without-using-jquery) — samnoon, Jul 19 '22 at 04:08

score 0 · Accepted Answer · answered Jul 19 '22 at 04:14

If you want to use width transition you have to add a width in your class like this:

var menu = document.querySelector('.menu');

menu.addEventListener('click', () => {
    menu.classList.toggle('active');
})

@import url('https://fonts.googleapis.com/css2?family=Lato&family=Poppins:wght@500&family=Roboto:ital,wght@0,300;0,500;1,100;1,300&display=swap');

html{
    background: linear-gradient(45deg,#a12626 0%,#550bec 100%) no-repeat;
    height: 100%;
}

body{
    font-family: 'Poppins', sans-serif;
}

.container{
    position: relative;
    margin-top: 30%;
}

.menu{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to right, #a12626 0%, #550bec 100%) no-repeat;
    /* border: white solid; */
    /* color: white; */
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 50px;
    cursor: pointer;
    transition: width 2s ease;
    width: 50px;
    text-align: center;
}


.menu.active{
    width: 300px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="menu">Menu</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Css width transition with click event

1 Answers1