Question

当我使用velocity.js在15秒内向左侧90px和90px向下动画时，动画有点紧张。

我该如何解决这个问题，还是应该为JS使用另一个动画库？

$(function() {
  $("#box").velocity({
    top: 90,
    left: 90
  }, {
    duration: 15000,
    easing: 'ease-in-out'
  });
});

#box {
  color: white;
  background-color: black;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  position: absolute;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//julian.com/research/velocity/build/velocity.min.js"></script>
<script src="//julian.com/research/velocity/build/velocity.ui.min.js"></script>
<div id="box">box</div>

View on Codepen

Answer 1

感谢@showdev，用translateX替换left和top，而translateY就是这个伎俩。

代码：

＆＃13;

$(function() {
  $("#box").velocity({
    translateY: 90,
    translateX: 90
  }, {
    duration: 15000,
    easing: 'ease-in-out'
  });
});

＆＃13;

#box {
  color: white;
  background-color: black;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  position: absolute;
}

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//julian.com/research/velocity/build/velocity.min.js"></script>
<script src="//julian.com/research/velocity/build/velocity.ui.min.js"></script>
<div id="box">box</div>

＆＃13;

View on Codepen

为什么动画会长时间抖动/波涛汹涌？

1 个答案: