jquery - while循环中的CSS旋转动画只能运行一次

Question

我希望 html 中的 div 标签在单击时旋转。这是我的代码

$(document).on('click', '.rotate', function() {
    degrees = 0;
    while (degrees >= (-1080)) {
        $(this).css({
            'transform': 'rotate(' + degrees + 'deg)'
        }).css({
            'transition': '3s'
        });
        degrees--;
    }
});

.rotate {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(magenta, blue, cyan, magenta);
    margin: 100px auto;
    line-height: 100px;
    cursor: pointer;
    border: 1px solid #fff;
}

.center {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.7);
    z-index: 5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rotate">
    <div class="center"></div>
</div>

第一次点击效果很好。但在第二次及以后的点击中却没有。我不知道为什么会发生这种情况。

Answer 1

无需使用 while 循环:CSS 将直接处理动画，您无需在每一步都设置 Angular 。

动画在第一次单击后不再运行的实际原因是因为您始终将动画设置为-1080deg，这意味着在第一次运行后，您将停止更改该值，因为它已经在 -1080deg 处:由于该值永远不会改变，CSS 动画不会再次运行，因为浏览器看不到任何差异，并且会选择不补间任何内容。

您想要的是在每次计数/点击时递减程度。这可以通过存储点击次数，然后在每次点击时递增来完成。然后，您想要旋转的度数将是该计数的倍数:

let count = 0;
$(document).on('click', '.rotate', function() {
  count++;
  degrees = -1080 * count;
  $(this).css({
    'transform': 'rotate(' + degrees + 'deg)'
  }).css({
    'transition': '3s'
  });
});

.rotate {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(magenta, blue, cyan, magenta);
  margin: 100px auto;
  line-height: 100px;
  cursor: pointer;
  border: 1px solid #fff;
}

.center {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.7);
  z-index: 5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rotate">
  <div class="center"></div>
</div>