Question

我正在使用anime-js动画库在悬停时增长div并在关闭鼠标时缩小div。以下是此库的文档： http://anime-js.com/documentation/#customEasingFunction

当您慢慢移动并等待每个动画完成之后动画完美运行，然后移动鼠标但是您要将鼠标悬停在“成长”动画完成之前快速移动鼠标，它将在结束'缩小'动画，反之亦然。这是我的意思的代码示例：

CodePen： 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更合适。

移动太快时，动画js悬停动画闪烁

1 个答案: