按鈕上的旋轉/過渡 animation 不適用於每個 onClick()

Question

所以我試圖創建一個在每次點擊時旋轉 180 度的箭頭（所以向上向下）。 但是過渡只適用於向下，當箭頭向上時，不再平滑過渡。

我的 HTML

 <button class="button-arrow" onClick="showItems()"> <img class="arrow-down" src="./src/arrow-down.svg"> </button>

<ul class="hidden-items">
   <li>Red</li>
   <li>Blue</li>
   <li>Yellow</li>
   
</ul>

我的 JS 文件：

function showItems() {
    var items = document.getElementsByClassName("hidden-items")[0];
    var arrow = document.getElementsByClassName("arrow-down")[0]

    if (items.style.display == "block") {
        items.style.display = "none";
        arrow.classList.toggle('rotate-arrow')

    } else {
        items.style.display = "block";
        arrow.classList.toggle('rotate-arrow')
    }
} 

我的 CSS

.rotate-arrow {
  transform: rotate(180deg);
  transition: transform 0.5s;
}

有人對如何解決這個問題有任何建議嗎？

Answer 1

那是因為您的轉換鏈接到您正在切換的 class

 function showItems() { var items = document.getElementsByClassName("hidden-items")[0]; var arrow = document.getElementsByClassName("arrow-down")[0] if (items.style.display == "block") { items.style.display = "none"; arrow.classList.toggle('rotate-arrow') } else { items.style.display = "block"; arrow.classList.toggle('rotate-arrow') } }

 .arrow-down { transition: transform 0.5s; }.rotate-arrow { transform: rotate(180deg); }

 <button class="button-arrow" onClick="showItems()"> <img class="arrow-down" src="./src/arrow-down.svg"> </button> <ul class="hidden-items"> <li>Red</li> <li>Blue</li> <li>Yellow</li> </ul>