I want to add a transition (transition : all .5s ease-out) when I click on a hamburger menu. What it is doing is when you click it one class is added, So <ul class = "nav"> will be changed into <ul class = "nav change"> using JS
var mybutton = document.getElementById("myBtn");
function onClickMenu() {
document.getElementById("nav").classList.toggle("change");
}.navigation {
display: flex;
background-color: rgb(46, 46, 46);
}
.nav {
padding: 0;
margin: 0 20px;
display: none;
}
.change {
background-color: #2e2e2e;
margin: 0;
position: absolute;
font-size: .8rem;
top: 0;
width: 100%;
display: flex;
flex-direction: column;
transition: all .5s ease-out;
}<div class="navigation">
<div id="menu" onclick="onClickMenu()">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
</div>
<ul class="nav" id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">More</a></li>
</ul>
</div>