Velocity.js - 越野车循环动画？答案

【问题标题】：Velocity.js - Buggy looping animation?Velocity.js - 越野车循环动画？
【发布时间】：2018-05-08 08:57:28
【问题描述】：

我一直在测试动画鼠标的理论设计，以表明网站的用户可以向下滚动。这并不复杂，而且我想出了一个可以重复使用的设计......

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

也许这只是浏览器渲染问题？如果您无法复制问题，请告诉我！干杯

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

【问题讨论】：

标签： javascript jquery sass velocity.js

【解决方案1】：

事实证明，velocity 是根据当前 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/

【讨论】：

【解决方案2】：

In this version 我们正在重新分配选择器以引入克隆的项目。然后所有克隆都按预期进行动画处理。

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

【讨论】：

嗯，这并没有什么不同，这可能是因为将选择器放入变量中没有真正的区别（此函数的每个循环仍应重新选择与那些匹配的每个元素类名）。但是，就像我的最新版本一样，它确实更新了 DOM（如您在此视频中看到的：useloom.com/share/59305bcf7600425094a603bfe66143aa）。
这很奇怪。我发现如果你在点处于静止位置时克隆它不会动画，但是如果你在它处于最高位置时克隆它就会开始动画。