翻译在 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，而不是他们的最新版本。

如果你想像那样使用转换 shorthand，请降级到较低版本：

$("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>

翻译在 Velocity.js 中不起作用

Translate not working in Velocity.js

javascript

jquery

velocity.js