アニメ-jsのホバーアニメーションが速すぎるときに点滅する

Question

アニバーサイズのアニメーションライブラリを使用してマウスを動かすときにdivを大きくし、divを小さくします。ここでは、このライブラリのドキュメントは次のとおりです。 http://anime-js.com/documentation/#customEasingFunction

あなたがゆっくりと移動し、各アニメーションは、マウスを移動する前に終了するのを待っています、あなたが上にマウスを移動しており、その後すぐに前に離れてマウスを移動すると、アニメーションは完全に働いています「成長する」アニメーションが終了すると、「シュリンク」アニメーションの終わりに点滅し、その逆もあります。ここで は私が何を意味するかのcodepen例です。

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のホバーを使用しています（）関数を使用していましたが、jQueryをcodepenに追加する方法がわかりませんでしたが、とにかにvanilla jsと同じ問題があります）

すべてのヘルプは非常に、あなたがそうでなければ、古いアニメーションは新しいものの上で遊んでいきます、再びそれらをアニメーション化する前に、アニメーションから要素を削除する必要が感謝

Answer 1

を高く評価しています。

あなたmouseover/mouseout関数内の各アニメーションの前に

anime.remove('#btn'); 

を追加します。

また、mouseoverイベントは、ユーザーがボタン上にマウスを移動するたびにトリガーされることにも注意してください。この場合はmouseenterが適切です。