[純css] bootstrap5 Dropdown 下拉選單加上動畫

bootstrap中的dropdown menu顯示或隱藏，是使用了.show這個class來控制選單的display:none; 或 display:block;，因此我們沒有辦法直接針對display去寫動畫。

假設我有一段下拉選單的html：

    <button
      class="btn-link"
      id="dropdownMenuLink"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      下拉選單按鈕
    </button>

    <ul
      class="dropdown-menu dropdown-menu-end"
      aria-labelledby="dropdownMenuLink"
    >
      <li><a class="dropdown-item" href="#">檢視個人頁面</a></li>
      <li><a class="dropdown-item" href="#">修改帳戶資訊</a></li>
      <li><a class="dropdown-item" href="#">登出</a></li>
    </ul>

當我點擊按鈕的時候，bootstrap會幫我在.dropdown-menu 元素上加上一個.show的class，所以我們要針對.show去修改顯示的方式。

先把menu的display永遠顯示，然後是否隱藏我們就使用visible這個屬性：

由於上下滑動是使用top的距離控制，所以加上transition，這樣top數字變動時，就會有動態效果。

.dropdown-menu {
  display: block;
  visibility: hidden;
  transition: 0.2s ease-out;
  top: 0;
  right: 0;  // 假如有使用 dropdown-menu-end，這邊就要設定為0 
  opacity: 0;
  &.show {
    opacity: 1;
    visibility: visible;
    top: 50px;
  }
}