javascript - 将旋转从 360 度重置为 0 度时如何避免逆时针旋转动画？

Question

我正在创建一个看起来像花式轮子的动画，当将旋转从 360 度重置为 0 度时，它以逆时针方向为轮子设置动画，如何避免这种情况？？？

HTML

<ul class="cm">
  <li><span>01</span></li>
  <li><span>02</span></li>
  <li><span>03</span></li>
  <li><span>04</span></li>
  <li><span>05</span></li>
  <li><span>06</span></li>
  <li><span>07</span></li>
  <li><span>08</span></li>
</ul>

SCSS

$Brdr: #7d868c;
  *{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    &:before,&:after{
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
  }
  %notaList{
    margin: 0;
    padding: 0;
    list-style: none;
  }

  $node: 8;
  $s: 80px;
  $rotation: 0;

  .cm{
    top: 50%;
    left: 0;
    right: 0;
    width: $s;
    height: $s;
    margin: auto;
    display: block;
    position: absolute;
    transition: transform 0.8s ease-out;
    transform:rotate(#{$rotation}deg);
    @extend %notaList;
    background: rgba(#000, 0.5);
    border-radius: 50%;
    li{
      left: 0;
      top:-($s*2 - ($s/2));
      color:#333;
      width:90%;
      height: 90%;
      display: block;
      position: absolute;
      margin-bottom: ($s*2 - ($s/2));

      & > span{
        display: block;
        padding: 36%;
        text-align: center;
        overflow: hidden;
        background: #CCC;
        border-radius: 5px 5px 50% 50%;
        transition: transform 0.8s ease-out;
      }
      @for $i from 1 through $node{
        &:nth-child(#{$i}n) {
          transform-origin: 50% ($s*2);
          transform: rotate(($i - 1) * 360deg/$node);
          & > span {
            transform:rotate(($rotation * -1) - (($i - 1) * 360deg/$node));
          }
        }
      }
    }
  }

JQuery

var i = 1,
    nodes = 8;

setInterval(function(){
  var rotation = i * 360 / nodes;
  i = i + 1;

  $('.cm').css({
    'transform': 'rotate(' + rotation + 'deg)'
  }).attr('data-rotation', rotation);

  $('.cm li').each(function (node){
    r = (node) * 360/nodes;
    $($('.cm li')[node]).find('span').css({
      'transform': 'rotate(' + ((rotation*-1) - r) + 'deg)'
    });
  });

  if(i >= nodes){
    i = 0;
  }
}, 1000);

JsFiddle 链接:

https://jsfiddle.net/aspjsplayground/hqczLby7/

Answer 1

我已经编辑了您的 jsfiddle，以便它在重置为 0 时不会为旋转设置动画。

执行此操作时，使用 window.requestAnimationFrame 会很有帮助，因为修改 transition 不是即时的。

https://jsfiddle.net/hqczLby7/8/