javascript - Velocity.js-Buggy循环动画？

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

但是由于某种原因，如果我尝试克隆元素并将其附加，它就不再在视觉上具有动画效果了吗？但是，如果我$.click()使用jQuery，它会在一轮迭代后修复。

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

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

最佳答案

事实证明，速度会根据当前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/

关于javascript - Velocity.js-Buggy循环动画？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47471655/

Mouse

javascript - Velocity.js-Buggy循环动画？