javascript - CSS 旋转变换不停留在新位置

Question

我正在尝试在单击元素时使用 CSS 变换和过渡属性对某些文本进行简单的旋转变换，但是，旋转似乎并没有停留在其新位置。

HTML如下:

<div class="accordion-btn">
    <span class="arrowGreen">&gt;</span> <a href="#">Show help</a>
</div>

我为箭头设置了 CSS 转换，如下所示:

.arrowGreen {
    -moz-transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

然后我使用 jQuery 点击函数应用转换，如下所示:

$(document).ready(function () {
    $('.accordion-btn').click(function (e) {

    e.preventDefault();

    if ($(this).find('.arrowGreen').css('transform') != "rotate(90deg)")
    {
        $(this).find('.arrowGreen').css({ '-ms-transform': 'rotate(90deg)', '-moz-transform': 'rotate(90deg)', '-webkit-transform': 'rotate(90deg)', 'transform': 'rotate(90deg)' });
    }
    else
    {
        $(this).find('.arrowGreen').css({ '-ms-transform': 'rotate(-90deg)', '-moz-transform': 'rotate(-90deg)', '-webkit-transform': 'rotate(-90deg)', 'transform': 'rotate(-90deg)'});
    }
}

这在一定程度上有效。单击该元素时，跨度会旋转，但是，当它达到 90 度时，它会自动恢复到默认状态。然后它将不再在单击时旋转，但是在开发人员工具中检查元素时，转换样式仍然附加到元素上。我错过了什么吗？

提前致谢， 亚伦

Answer 1

$(document).ready(function() {
  $('.accordion-btn').click(function(e) {
    e.preventDefault();
    $('.arrowGreen').toggleClass('rotate90');
  });
});

.arrowGreen {
  -moz-transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  display: inline-block;
}
.rotate90 {
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="accordion-btn">
  <span class="arrowGreen">&gt;</span>  <a href="#">Show help</a>
</div>