动画性能问题velocity.js

Question

我正在尝试动画跨度，动画似乎是有效的，但它是有点滞后和不顺利。

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%" })

这是本例的codepen

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

Answer 1

您使用的是Velocity V2，其中没有损坏的伪transformX样式快捷方式。github页面的顶部清楚地指出，网站上的文档仅引用V1，并引用V2文档的Github维基。

只需使用真正的css来制作动画，这意味着要使用真正的transform属性。最安全的方法是在你第一次设置它的动画时通过强制馈送，因为它不能从浏览器读取值(维基中提到了一些原因)：

$(".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%)"] });