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

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

HTML JQuery jsiddle链接：

---

只要从代码中删除此部分，旋转角度就会增加
45 90 135 180 225 270 315 360 405 450等等

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

---

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

执行此操作时，使用

window.requestAnimationFrame

会很有帮助，因为修改

transition

不是即时的

---

但当旋转角度无限大或超出范围时，浏览器可能会崩溃。您可以使用关键帧，但我想严格使用Javascript，因为我想用它做更多的事情，CSS关键帧不完全符合我的要求。在看到您对kva的第二条评论后，回答：可能尝试通过类添加CSS转换（例如，如果缺少该类，则不添加转换）。在重置之前删除该类，并在重置完成后将其添加回。

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

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

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