マウスオーバーやマウス出力が要素をアニメーション化して起動しない

Question

ユーザーが要素の上をホバーしているかどうかを検出する必要がありますが、これは簡単です。しかし、これらのイベントは、要素がアニメーション化されているときには発生しません。私のフィドルをチェックアウトした場合、マウスを動かさずにマウスの前を要素にアニメーションさせるだけで、イベントが発生しないことがわかります。なぜこれが起こるのかは分かりますが、ユーザーが自分のマウスを動かさずに要素がその下でアニメーション化されても、ホバリングを検出するためには、自分が望む動作を得るための良い方法を見つけることができませんでした。

どのような考えですか？

ありがとうございます！

注：外部ライブラリを使用せずに解決策が最適であるが、任意のヘルプはまだ評価されて:)

var counter = 0; 

document.getElementById("moving").addEventListener("mouseover", function(){ 
    counter++; 
    var node = document.createElement("LI"); 
    var textnode = document.createTextNode("Entered " + counter); 
    node.appendChild(textnode); 
    document.getElementById("message").appendChild(node); 
}); 

document.getElementById("moving").addEventListener("mouseout", function(){ 
    var node = document.createElement("LI"); 
    var textnode = document.createTextNode("Left " + counter); 
    node.appendChild(textnode); 
    document.getElementById("message").appendChild(node); 
}); 

HTML

<div id='moving'></div> 
<ul id="message"></ul> 

CSS

#moving { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    animation: move 7s linear; 
} 

@keyframes move { 
    from {transform: translateX(0px)} 
    to {transform: translateX(500px)} 
} 

JSを

は、ここでのフィドルです： https://jsfiddle.net/w5j842Lx/

Answer 1

は、それは、マウスの座標がある場合は、基本的機能をチェックするために10回秒を呼び出し、この

setInterval(checkMouse, 100); 

のような機能を備え、このjsfiddle https://jsfiddle.net/3vpaoj59/ を見てみましょうアニメーションされた形の中で。あなたの形は正方形で円ではないので、いくつかの異なる数学をする必要があります。このコードはプラグインを使用していないのでいいですが、おそらくCPUを大量に消費し、場合によってはパフォーマンスが低下する可能性があります。

Answer 2

間隔内にマウスが入っているかどうかを確認できます。あなたのフィドルから伸びているworking fiddleがあります。

// This is the helper method I have written 
 
var addMoveListener = function(element, onmouseover, onmouseout) { 
 
    var over = false; 
 
    var mouseX, mouseY; 
 
    var checkOver = function(ev) { 
 
    if (ev) { 
 
     mouseX = ev.clientX; 
 
     mouseY = ev.clientY; 
 
    } 
 
    if (mouseX == null || mouseY == null) return; 
 

 
    var rect = element.getBoundingClientRect(); 
 
    var isInside = mouseX >= rect.left && mouseX < rect.right && mouseY >= rect.top && mouseY < rect.bottom; 
 
    if (over && !isInside && onmouseout) onmouseout(); 
 
    if (!over && isInside && onmouseover) onmouseover(); 
 
    over = isInside; 
 
    } 
 

 
    document.addEventListener("mousemove", checkOver); 
 
    var interval = setInterval(checkOver.bind(null, null), 100); 
 
} 
 

 
// Code below is for the sake of demonstration 
 
var counter = 0; 
 

 
var mouseovercallback = function() { 
 
    counter++; 
 
    console.log("Entered " + counter); 
 
}; 
 

 
var mouseoutcallback = function() { 
 
    console.log("Left " + counter); 
 
}; 
 

 
addMoveListener(document.getElementById("moving"), mouseovercallback, mouseoutcallback);

#moving { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    animation: move 7s linear; 
 
} 
 

 
@keyframes move { 
 
    from { 
 
    transform: translateX(0px) 
 
    } 
 
    to { 
 
    transform: translateX(500px) 
 
    } 
 
}

<div id='moving'></div>

マウスはすべて100ミリ秒のために含まれ、また、マウスが移動した場合ならば、コードをチェックします。要素が矩形でないか、回転、斜行などの場合を処理する場合は、コードを改善する必要があります。