当我使用 velocity 在 15 秒内将一个框动画化为向左 90px 和向下 90px 时.js,动画有点抖动。
如何解决此问题,还是应该只使用另一个用于 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>
在代码笔上查看
多亏了@showdev,用translateX替换左和顶部,翻译Y就成功了。
法典:
$(function() {
$("#box").velocity({
translateY: 90,
translateX: 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>
在代码笔上查看