Javascript/css转换只在第一次工作

我试图在第一次单击时使svg旋转，然后在第二次单击时旋转回原始位置，两次都是平滑的。我有以下代码

HTML:

JS:

---

我想要发生的是svg在点击时旋转到225度，然后在第二次点击时旋转到0度。目前，它旋转到225度，但在第二次点击时，它不会像第一次点击那样平稳地旋转，它只是重置回原来的位置。我原以为transition属性和transition duration可以做到这一点，但它只适用于第一次单击。我尝试过做js动画，但它不支持transform，我不想使用插件或polyfill来实现这一点。

问题在于，只有在元素中添加了

open

类后，才添加

transform

规则，但同时添加了

rotate（）

属性，所以没有动画

要解决此问题，您需要在默认状态

.quick-access\uu toggle

上定义

转换

规则。然后，您只需在元素上切换CSS类即可修改

rotate（）

规则。

转换

将在两种状态之间平滑过渡，JS代码更加简洁。试试这个：

$（'.quick-access__-toggle'）。打开（'click'，function（）{
$（this.toggleClass（'open'）；
$（'body'）.toggleClass（'overlay'））
})

。快速访问{
位置：绝对位置；
底部：20px；
右：20px；
}
.快速访问开关{
宽度：50px；
高度：50px；
边界半径：50%；
背景：#faab18；
}
.快速访问\切换svg{
转变：转变0.7s；
变换：旋转（0度）；
}
.打开{
背景：白色；
}
.打开svg{
变换：旋转（225度）；
}
1.开放道路{
行程：#faab18；
}
.覆盖{
背景：rgba（30,30,30,0.6）；
}

<div class="quick-access">
  <div class="quick-access__toggle">
     <svg id="toggle-button" viewBox="0 0 100 100" >
       <path d="M 50 30 L 50 70" stroke="white" stroke-width="5"/>
       <path d="M 30 50 L 70 50" stroke="white" stroke-width="5"/>
     </svg>
  </div>
</div>

$colour-orange: #faab18;

.quick-access{
  position: absolute;
  bottom: 20px;
  right: 20px;
  &__toggle{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: $colour-orange;
  }
}

.open{
  background: white;
  svg{
    transition-property: transform;
    transition-duration: 0.7s;
    path{
      stroke: $colour-orange;
    }
  }
}

.overlay{
  background: rgba(30,30,30,0.6);
}

$('.quick-access__toggle').on('click', function(){
  $(this).toggleClass('open');
  if($(this).hasClass('open')){
    $('#toggle-button').css('transform', 'rotate(225deg)');
  }else{
    $('#toggle-button').css('transform', 'rotate(0deg)');
  }

  $('body').toggleClass('overlay')
})