動畫-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懸停動畫在移動太快時閃爍

回答

相關問題