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

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

如果您希望它从右向左弹跳，则称为循环。尝试添加循环：如下所示：

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

Answer 3

使用forcefeeding -

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