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

Question

我正在使用 动画velocity.js，并希望在动画完成后返回块。所以我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

换行

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

至

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

Answer 2

如果您希望它从右向左弹跳，则称为循环。尝试像这样添加 loop:true ：

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

Answer 3

使用强制喂食-

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