javascript - 翻译在 Velocity.js 中不起作用

Question

我在使用 Velocity.js 为元素设置动画时遇到一些问题。我当前的代码不起作用(它的意思是将元素向右平移 100 像素)...

$("#example").velocity({ translateX: "100px" });

但是，有趣的是，当我将其更改为以下内容时，它确实有效......

$("#example").velocity({ transform: "translateX(100px)" });

我的示例似乎与 http://velocityjs.org/#transforms 给出的代码相同。是否有任何明显的原因导致这种情况发生？

这是一个 JSFiddle 来测试我的问题，https://jsfiddle.net/zwtoxxfL/2/ .

Answer 1

您在 fiddle 中使用的是 2.0.2 版本，它看起来不支持这种语法。 Velocity 尚未更新他们的文档 - 他们在 codepen 上提供的工作示例使用版本 1.5.0，而不是最新版本。

如果您想使用这样的转换简写，请降级到较低版本:

$("div").velocity({ translateX: "100px" });

div {
  background: green;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<div></div>