向我的响应式下拉导航栏添加过渡

Question

当您单击“我的汉堡”汉堡时，它将立即打开。它工作正常。但是，当您单击汉堡时，我想为其添加一些动画/过渡。就像轻松自在一样。但是当我将transition: all 0.4s ease;放到我的ul中时，它在打开时仍然没有缓解。有人知道解决办法吗？

@media (max-width: 900px) {
  ul.responsive {
    margin-top: 60px;
    width: 100%;
    display: block;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  ul {
    display: none
  }
  ul.responsive li {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
  ul.responsive li a {
    text-align: center;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  #burger {
    display: block;
  }
}

<div id="burger">
  <i class="fa fa-bars" id="burger"></i>
</div>
<div id="top">
</div>
<ul id="ul" class="ul">
  <li><a href="#">Home</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">Pricing</a></li>
  <li><a href="#">Contact</a></li>
</ul>

<script>
  var burger = document.querySelector("#burger");
  var navLinks = document.querySelector("#ul");
  burger.addEventListener('click', function() {
    navLinks.classList.toggle('responsive');
  });
</script>