此时它不起作用的原因是，您无法仅通过将display属性从none更改为block来设置其动画。
我修改了CSS，使菜单“从顶部滑入”：

.dropdown-modal {
  position: fixed;
  z-index: 1060;
  top: -100%; /* push it above the visible portion of the page by its height */
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: top 0.3s ease-out; /* set the top property to be animated */
}
.dropdown-modal--active {
  top: 0; /* return it back to the default position so it can be seen */
}

.dropdown-bg {
  position: fixed;
  z-index: 10;
  visibility: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
} 

.dropdown-bg--active { 
  visibility: visible;
}

$(document).ready(() => {
  $("#test").on("click", function() { 
    $(".dropdown-modal").addClass("dropdown-modal--active")
    $(".dropdown-bg").addClass("dropdown-bg--active")
  })
  $(".dropdown-modal").on("click", function() { 
    $(".dropdown-modal").removeClass("dropdown-modal--active")
    $(".dropdown-bg").removeClass("dropdown-bg--active")
  })
  // Added an event listener to allow you to toggle the menu by clicking
  // on the menu to close it, this can be moved to be on a button click.
})

<button id="test">Open</button>
<div class='dropdown-bg'></div>
<div class="dropdown-modal">
   <div class="dropdown-modal__contaner">
      ...
   </div>
</div>

希望这个有用。

Edit：更改代码以添加背景div，该div将在菜单根据注解从顶部移入的位置以灰色背景显示。