Question

我有一个刷新按钮，我想让它在点击时慢慢旋转。所以我想使用transition和transform，这是我实现的：

#refresh{
  transition:all 2s;
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
}
#refresh.rotate{
  transform: rotate(360deg); 
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
}

$("#refresh").on('click', function() {
  $(this).toggleClass('rotate');
})

这样，当我第一次点击时，它顺时针旋转，但是第二次逆时针旋转，因为它会回到开头。

所以我将代码更改为：

$("#refresh").on('click', function() {
    $(this).css('transform', 'rotate(360deg)');
});

在这个时间里，第二次和后者，当我点击时没有任何反应，因为它已经处于360度位置。

每次单击时，如何使刷新按钮顺时针旋转？

修改：JsFiddle

Answer 1

看起来您可以使用animation-iteration-count: infinite;作为CSS样式来永久制作动画。 https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count

Answer 2

您可以尝试使用显示的解决方案here：保持一直运行的总数，并在点击处理程序中设置transform: rotate(**the accumulated value**deg)。

Answer 3

这就是你需要的：

$("#refresh").click(function() {
   $(this).toggleClass('rotate').promise().done(function(){
      $(this).toggleClass('rotate');   
   });;
});

Answer 4

您可以尝试使用Jquery和CSS3动画的混合，如下所示：

$(document).ready(function(){
    var a = 0;
    setInterval(function(){
        a = a +5;
        $('.this-rotates').css('-webkit-transform','rotate('+a+'deg)');
        $('.this-rotates').css('-moz-transform','rotate('+a+'deg)');
        $('.this-rotates').css('transform','rotate('+a+'deg)');
    },50);
});

在这里小提琴：http://jsfiddle.net/Newtt/q4u8a64f/2/

如何使用css和jquery顺时针旋转？

4 个答案: