动画-js悬停动画在移动太快时闪烁

我正在使用动漫-JS动画库在悬停时增长div，并在关闭鼠标时缩小div。下面是这个库中的文件： http://anime-js.com/documentation/#customEasingFunction 动画-js悬停动画在移动太快时闪烁

当您移动缓慢，等待每一个动画来移动鼠标之前完成，但你，你是悬停在再之前的快速移动鼠标离开的动画可以正常使用'grow'动画已经完成，它会在'缩小'动画结束时闪烁，反之亦然。这里是什么，我的意思是一个codepen例如：

CodePen： https://codepen.io/Fergtato/pen/rmVYqq

HTML

<div id="btn" class="btn"></div>

var btn = document.getElementById("btn"); 

btn.addEventListener("mouseover", function() { 
    var animate = anime({ 
     targets: '#btn', 
     width: 1000 
    }); 
}); 

btn.addEventListener("mouseout", function() { 
    var animate = anime({ 
     targets: '#btn', 
     width: 500 
    }); 
});

（在我的实际网站，我使用jQuery悬停（）函数，但我不知道如何将jQuery添加到codepen，再加上它与vanilla js有相同的问题）

任何帮助是极大的赞赏，感谢

来源

2017-04-16 Fergus O' Hagan

这似乎是一个异常，由您的动画引擎引起的。我不知道动画引擎是如何工作的，但是当我通过鼠标显示和隐藏图像时，我遇到了这种问题。解决方案是在鼠标事件侦听器之间创建一个超时。 –

你又有动画之前删除从动画的元素，否则旧的动画将继续发挥在新的顶部。

添加

anime.remove('#btn');

每个动画之前

里面你mouseover/mouseout功能。

另请注意，每次用户将鼠标移动到按钮上时，都会触发mouseover事件。在这种情况下，mouseenter更合适。

来源

2017-04-18 10:17:11 Julian

这正是我需要的，谢谢！ –

动画-js悬停动画在移动太快时闪烁

回答

相关问题