Question

所以我设法创建了一个仅使用setTimeout在一个方向上旋转的旋转。我想知道如果不使用它我是否还能实现这一点。我遇到的主要问题是，如果我足够快地点击它，它仍然会旋转。

总的来说，无论我点击多快，都有办法让它在一个方向旋转。

＆＃13;

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");
  }
}

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 1

您可以使用单个类进行转换，并删除transitionend

上的类

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

没有setTimeout的CSS连续旋转

1 个答案: