Question

如何使持续时间旋转角度达到45度并停止？在动画更改边距左边，我无法找到下面演示中的make angle增加到45的方式，怎么做??

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表现更好。这看起来像下面的

＆＃13;

$('.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)"
  });
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

对于性能，我建议也使用vanilla javascript

如何旋转到45度和动画更改同时离开？

1 个答案: