javascript - 没有setTimeout的CSS连续旋转

Question

因此，我通过使用 setTimeout 设法创建了一个仅沿一个方向旋转的旋转。我想知道如果不使用它我是否仍然可以实现这一目标。我遇到的主要问题是，如果我点击的速度足够快，它仍会以另一种方式旋转。

总的来说，有没有办法让它在一个方向上旋转，而不管我点击的速度有多快。

function clicked()
{
  element = $("#spin");
  if ($(element).hasClass("rotate2"))
  {
    $(element).removeClass("rotate rotate2");
    setTimeout( () => $(element).addClass("rotate"), 1);
  }
  else if($(element).hasClass("rotate"))
  {
    $(element).addClass("rotate2");
  }
  else
  {
    $(element).addClass("rotate");
  }
}

div.horizontal {
  position: absolute;
  width: 100%;
  height: 5px;
  background-color: red;
  top: 50%;
  transform: translateY(-50%);
}

div.horizontal.rotate {
  transform: translateY(-50%) rotate(-180deg);
  transition: transform 0.5s;
}
div.horizontal.rotate2 {
  transform: translateY(-50%) rotate(-360deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 50px; height: 50px; position: relative;">
  <div id="spin" class="horizontal">
  
  </div>
</div>
<button onclick="clicked()">Rotate</button>

Answer 1

您可以只使用一个类进行转换，并在 transitionend 上删除该类

var $button = $('#button'),
    $spin = $('#spin');

$(document).on('click', $button, function() {
  $spin.addClass('rotate').on('transitionend',function() {
    $(this).removeClass('rotate');
  });
})

div.horizontal {
  position: absolute;
  width: 100%;
  height: 5px;
  background-color: red;
  top: 50%;
}

div.horizontal.rotate {
  transform: rotate(-180deg);
  transition: transform .5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 50px; height: 50px; position: relative;">
  <div id="spin" class="horizontal">
  </div>
</div>
<button id="button">Rotate</button>