jquery - 如何旋转到 45 度并同时向左移动动画？

Question

如何在持续时间内旋转到 45 度并停止？在动画更改 margin-left 期间，我找不到使下面演示中的 angle 增加到 45 的方法，怎么做？？

http://jsfiddle.net/8tP9D/37/

var angle = 0;

$('.btn').click(function(){
$("#a").animate ({
    "margin-left": "+=200px" 
    },
    {
    step: function (now, fx) {
        angle += 1;
        $(this).css({
            "-moz-transform":"rotate("+angle+"deg)",
            "-webkit-transform":"rotate("+angle+"deg)",
            "-ms-transform":"rotate("+angle+"deg)",
            "-o-transform":"rotate("+angle+"deg)"
        });
    },
    duration: 300 }, "linear");
});

Answer 1

没有理由在每一步都增加旋转，因为您可以使用 .animate 并给它一个目标值，它会自动(并且流畅地)步进到该值

如果我这样做，我会使用 .css 和 CSS 转换，因为它的性能比 jQuery 的 transform 好得多。看起来像下面这样

$('.btn').click(function(){
  $("#a").css ({
    "-moz-transform":"translateX(200px) rotate(45deg)",
    "-webkit-transform":"translateX(200px) rotate(45deg)",
    "-ms-transform":"translateX(200px) rotate(45deg)",
    "transform":"translateX(200px) rotate(45deg)"
  });
});

#a {
  margin-top:25px;
  margin-left:25px;
  width: 150px;
  height: 150px;
  list-style: none;
  background-color: blue;
  -webkit-transition:.3s linear;
  -moz-transition:.3s linear;
  -ms-transition:.3s linear;
  transition:.3s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="btn">btn</div>
<ul>
  <li id="a">
    <span>content</span>
  </li>
</ul>

为了性能，我建议也使用 vanilla javascript