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

Question

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

的 HTML

def addsum(list1,list2):
    if len(list1) >= len(list2): 
        for i in range(len(list2)):
            list1[i]=list1[i]+list2[i]
        return list1
    else:
        for i in range(len(list1)):
            list2[i]=list1[i]+list2[i]
        return list2

的 SCSS

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

的 JQuery的

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

JsFiddle链接：

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

Answer 1

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

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

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

Answer 2

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

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