CSS вращать анимацию в то время как -l oop работает только один раз

Question

Я хочу, чтобы тег div в html вращался, когда я нажимаю на него. Вот мой код

$(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 l oop: CSS будет обрабатывать анимации напрямую, и вам не нужно устанавливать градус на каждом шаге.

Фактическая причина, почему анимация не запускается снова после первого щелчка, потому что вы всегда анимируете на -1080deg, что означает, что после первого запуска вы прекратите изменять значение, так как оно уже на -1080deg: так как значение никогда не меняется анимация CSS больше не будет запускаться, потому что браузер не видит никакой разницы и будет выбирать, чтобы ничего не изменять.

Вам нужно уменьшить градус на каждые count / click. Это можно сделать, сохранив количество кликов, а затем увеличивая его при каждом клике. Тогда количество градусов, которое вы хотите повернуть, будет кратно этому числу:

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>

Answer 2

Вы на самом деле не хотите, чтобы jQuery выполнял анимацию в while l oop для начала.

Пусть CSS выполняет анимацию и использует только jQuery подключить обработчик событий и убедиться, что анимация вращения не будет складываться.

$(document).on('click', '.rotate:not(.rotating)', function () {
    var $this = $(this);
    $this.addClass("rotating");
    setTimeout(function () {
        $this.removeClass("rotating")
    }, 3000);
});

.rotate {
  height: 50px;
  width: 50px;
  text-align: center;
  border: 1px solid blue;
  padding: 5px;
  margin: 5px;
  display: inline-block;
} 
.rotating {
  transform: rotate(-1080deg);
  transition: 3s;
  border-color: red;
}

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

<div class="rotate">rotate 1</div>
<div class="rotate">rotate 2</div>
<div class="rotate">rotate 3</div>
<div class="rotate">rotate 4</div>