没有jquery的Javascript动画

Question

我正在摆弄this网站已经呆了一天了，我真的在一件事上很挣扎。当我修改 function move 时，我可以很容易地反转动画，这样如果 stop 为负数 -stop-(-stop*delta)+"px" 并且它可以工作。有点..对于easeOut(bounce)它效果很好。但是，当我使用线性时，项目会弹跳到我定义为停止的位置，然后通过线性效果，它会返回到之前的位置。谁能帮助我如何轻松反转它有效的动画？

谢谢!

Answer 1

我想对您的代码发表一些评论:

• 您应该在行尾后的所有位置添加;。这是一个很好的做法。
• 对于修复问题，您应该设置 start: 0 而不是 start: 200。它需要，因为您将 item 元素设置为 style="left:200px"

应该是这样

document.getElementById('item').onclick = function (e) {
    e.target.move({
        direction: "left",
        delta: linear,
        stop: -200,
        duration: 600,
        start: 0    // instead of 200
    });
};

这是我的jsfiddle