按钮上的旋转/过渡动画不适用于每个 onClick()

编程问答 2022-04-25

问题描述

所以我试图创建一个在每次点击时旋转 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;
}

有人对如何解决这个问题有任何建议吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-transitionshtmljavascriptrotatetransform