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

Question

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

当您缓慢移动并等待每个动画完成后再移动鼠标时，动画效果很好，但是您要将鼠标悬停在上方，然后在“增长”动画完成之前快速将鼠标移开，它会在“收缩”动画结束，反之亦然。 这是我的意思的代码笔示例:

代码笔: https://codepen.io/Fergtato/pen/rmVYqq

HTML

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

JS

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 有同样的问题)

非常感谢任何帮助，谢谢

Answer 1

您必须先从动画中删除元素，然后再为它们设置动画，否则旧动画将继续在新动画之上播放。

添加

anime.remove('#btn');

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

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