动画性能问题velocity.js

Question

I'm trying to animate spans and the animation seems to be working but it is a bit laggy and not smooth.

https://codepen.io/pokepim/pen/JBRoay I think it is because im using left/right to animate

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

Now im trying to reconstruct this behaviour using translateX but it doesnt work as intended (actually it does not animate at all)

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

This is codepen for this example

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

Answer 1

You are using Velocity V2, which does not have the broken fake transformX style shortcuts in it. The top of the github page states clearly that the documentation on the website refers to V1 only, and to refer to the Github wiki for V2 documentation.

Just use real css for animation, and that means using the real transform property. The safest way to do this is via forcefeeding the first time you animate it as it cannot read the value from the browser (there are reasons mentioned in the wiki):

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

Of further note, Velocity has absolutely nothing to do with jQuery now, so if all you are doing is selecting elements, it is quite safe to drop jQuery and use the built-in methods instead:

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