javascript - 如何结合显示、不透明度和过渡？

Question

我有以下。

CSS：

.action .menu {
   opacity: 0;
   align-items: center;
   position: absolute;
   right: 0;
   min-width: 200px;
   background: var(--background-color);
   transform: translateY(-43px);
   -webkit-transform: translateY(-43px);
   -moz-transform: translateY(-43px);
   -ms-transform: translateY(-43px);
   -o-transform: translateY(-43px);
   border-radius: 30px;
   -webkit-border-radius: 30px;
   -moz-border-radius: 30px;
   -ms-border-radius: 30px;
   -o-border-radius: 30px;
   transition: all .3s ease-in-out;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -ms-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   display: none;
}

.action .menu.active{
    opacity: 1;
    font-size: 14px;
    transform: translateY(-44px);
    -webkit-transform: translateY(-44px);
    -moz-transform: translateY(-44px);
    -ms-transform: translateY(-44px);
    -o-transform: translateY(-44px);
    display: block; 
}

JavaScript：

function ToggleMenu() {
    const togglemenu = document.querySelector('.menu');

    togglemenu.classList.toggle('active')
}

HTML：

<div class="action">
  <div class="profile border_account mt-2 col-6  ms-2  " onclick="ToggleMenu()">

    <div class=" display_account" >

          <img class="rounded-2 image_acc my-1 mx-2 me-1" src="pictures/black.png" alt="">

          <p class="truncate my-1 mx-2 font_bold pt-0 pb-2">eskandari.bemolaaaaaaaaaa</p>

          <svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" fill="currentColor" class="bi bi-caret-down-fill " viewBox="0 0 16 16">
            <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
          </svg>

    </div>

  </div>

  <div class="menu me-2">
      <ul class=" p-0 m-0">
        <li class=" account_container display_account2 pb-1 ms-2 mb-3 rounded-3" onclick="ToggleMenu()">              
  
                <img class="rounded-2 image_acc2 my-1 mx-2" src="pictures/black.png" alt="">

                <p class="truncate2 my-1 mx-2 font_bold pt-0 pb-2">eskandar.eskandary.eskandarpoor</p>

                <svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" fill="currentColor" class="bi bi-caret-up-fill " viewBox="0 0 16 16">
                  <path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
                </svg>

        </li>
        <div class="line mx-auto"></div>
          <li class="li_account pb-1 my-1 mx-2"><a href="#" class="font_regular text-center my-1 width_100">پروفایل من</a></li>
          <div class="line mx-auto"></div>
          <li class="li_account pb-1 my-1 mx-2 "><a href="#" class="font_regular my-1 text-center logout_ width_100">خروج</a></li>
      </ul>
  </div>
</div>
  

它通过单击按钮显示（onclick 添加类操作）。

它工作得非常好，希望我不能让显示没有显示动画块。

我试图将过渡添加到不透明度。

不透明本身没有任何显示的问题是，这个绝对 div 下方的元素不可点击，所以我必须添加显示。

有人可以给它一个动画，让它不会弹出吗？

标签： javascriptcss