Anime-js悬停动画在移动过快时闪烁答案

【问题标题】：Anime-js hover animation flashing when moving too fastAnime-js悬停动画在移动过快时闪烁
【发布时间】：2017-04-16 21:24:15
【问题描述】：

我正在使用anime-js 动画库在鼠标悬停时增加一个div，并在鼠标移开时缩小div。这是该库的文档： http://anime-js.com/documentation/#customEasingFunction

当您缓慢移动并等待每个动画完成后再移动鼠标时，动画效果很好，但是您将鼠标悬停在上方，然后在“增长”动画完成之前快速将鼠标移开，它会在“缩小”动画结束，反之亦然。这是我的意思的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 hover() 函数，但我不确定如何将 jQuery 添加到 codepen，而且无论如何它与 vanilla js 有同样的问题）

非常感谢任何帮助，谢谢

【问题讨论】：

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

标签： javascript jquery animation

【解决方案1】：

您必须在重新设置动画之前从动画中删除元素，否则旧动画将在新动画之上继续播放。

添加

anime.remove('#btn');

在 mouseover / mouseout 函数中的每个动画之前。

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

【讨论】：

如果你能举个例子说明你将如何做到这一点，那就太好了。