为什么速度动画只能工作一次？

Question

我正在使用 velocity.js 制作动画，并希望在动画完成时 return 阻止。所以我分配 el[0].style.transform = "translateX(0px)" 并再次调用函数，但是动画不再工作了。

http://jsfiddle.net/nbLLzqn0/2/

var box = $('.box');

function anim() {
    box.velocity({
        translateX: 200
    }, 
    {
        duration: 3000,
        complete: function (el) {
            $('.info').html(el[0].style.transform);
            el[0].style.transform = "translateX(0px)";
            anim();
        }
    });
}

anim();

我做错了什么？

Answer 1

如果想让它从右向左弹跳，就叫循环。尝试像这样添加 loop:true：

   duration: 3000,
   loop: true,
   complete: function (el) {

Answer 2

换行

el[0].style.transform = "translateX(0px)";

到

box.velocity({ translateX: 0 },{ duration: 0 });

Answer 3

使用forcefeeding -

box.velocity({
    translateX: [200, 0]
}