Quiero agregar una transición (transición: todos los .5s de desaceleración) cuando hago clic en un menú de hamburguesas. Lo que está haciendo es que cuando hace clic en él, se agrega una clase, por lo que <ul class = "nav"> se cambiará a <ul class = "nav change"> usando 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>