动画性能问题 velocity.js

Question

我正在尝试为 span 设置动画，动画似乎可以正常工作，但有点滞后且不流畅。

https://codepen.io/pokepim/pen/JBRoay 我认为这是因为我使用 left/right 来制作动画

$(".bf").velocity({left: "100%" })
$(".af").velocity({right: "100%" })

现在我正在尝试使用 translateX 重建此行为，但它没有按预期工作（实际上它根本没有动画）

$(".bf").velocity({ translateX: "-100%" })
$(".af").velocity({ translateX: "100%" })

这是此示例的代码笔

https://codepen.io/pokepim/pen/ejzZvy

Answer 1

您使用的是 Velocity V2，其中没有损坏的假 transformX 样式快捷方式。 github 页面顶部明确指出网站上的文档仅指 V1，V2 文档请参考 Github wiki。

只要用真实的css做动画，也就是用真实的transform属性。最安全的方法是在您第一次为其设置动画时通过强制进给，因为它无法从浏览器读取值（wiki 中提到了原因）：

$(".bf").velocity({ transform: ["translateX(-100%)", "translateX(0%)"] }); $(".af").velocity({ transform: ["translateX(100%)", "translateX(0%)"] });

进一步注意，Velocity 现在与 jQuery 完全无关，所以如果您所做的只是选择元素，那么删除 jQuery 并使用内置的是非常安全的方法代替：

document.querySelectorAll(".bf").velocity({ transform: ["translateX(-100%)", "translateX(0%)"] }); document.querySelectorAll(".af").velocity({ transform: ["translateX(100%)", "translateX(0%)"] });

动画性能问题 velocity.js

Animation performance issue velocity.js

javascript

css

velocity.js