我有一个简单的 block ，假设使用 translateX 向左移动 200px。它将向左移动，位置为 left。我似乎无法使用 translateX 或 translateY 移动方 block 。转换翻译的 CSS 值将起作用。使用翻译的原因是与位置相比的性能。我注释掉了 Velocity 留下的位置，让您了解我想要实现的目标。
var button = document.getElementById('button');
var adiv = document.getElementById('panel');
button.addEventListener('click', function(){
//Velocity(adiv, { left: '100' }, [ 500, 20 ]);
Velocity(adiv, {translateX: 200}, [ 500, 20 ]);
})#panel {
display: block;
position: absolute;
background: #ffffbd;
width: 100px;
height: 100px;
top: 0;
left: 0;
}
button {
top: 90%;
position: relative;
display: block;
}<script src="https://cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<div id="topbar"></div>
<div id="panel">
</div>
<button id="button">start</button>
</body>最佳答案
在 Velocity V2 中，不再有任何 transform 快捷方式，例如 translateX - 只需正确使用 css transform 属性，它就会工作(V1 中存在问题不幸的是试图这样做)。
速度(adiv, {transform:"translateX(200px)"}, [ 500, 20 ]);
如果没有 forcefeeding，它将从 0 开始动画。
关于javascript - 如何使用 Velocity.js 动画化翻译属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48964932/