Velocity.js - Buggy循环动画？

Question

我一直在测试一个动画鼠标的理论设计，以表明网站的用户可以向下滚动。这并不复杂，我已经提出了一个应该是可重用的设计……

但是，由于某些原因，如果我试图克隆元素并附加它，它不再在视觉上获得动画？然而，如果我使用jQuery进行$.click()，它会在一次迭代后修复。

也许这只是一个浏览器渲染问题？如果你不能重现这个问题，请告诉我！干杯

jsfiddle：https://jsfiddle.net/xw39e0bs/4/

Answer 1

原来速度是根据当前的CSS值计算起点的。因此，如果你在运动中克隆一个移动的元素，那将成为新的起点。因此，解决此问题的一种方法是提供forcefeeding。

工作示例：

function mouse(){
    $(".mouse .ball").velocity({
    top: ["45%","25%"] //[TARGET_VAL,START_VAL]
},{
    duration: 800,
  easing: "swing",
}).velocity("reverse",{
    delay: 2000,
  complete: function(){
    mouse();
  }
});
}

mouse();

$("#clone").click(function(){
    $(".mouse").last().clone().appendTo("#mice");
});

https://jsfiddle.net/xw39e0bs/5/

Answer 2

In this version我们正在重新分配选择器来引入克隆的项目。然后，所有克隆都会按预期设置动画。

complete: function(){
  sel = $(".mouse .ball");
  mouse();
}