マウスオーバーとマウスアウトを使用するときのぎこちないアニメーションの回避

Question

targetでマウスを動かすと、アニメーションは左から右に移動し、ユーザーがtargetからマウスを動かすように単純なアニメーションを作成するためにWeb Animation APIを使用していますアニメーションは逆になり、targetは右から左に移動する必要があります。

現在のところ、ユーザーがアニメーション中にマウスを出し入れすると、アニメーションがぎくしゃくしていて、滑らかな効果がありません。

この問題を解決する方法を知りたいと思います。

注：現在、私はWeb Animation APIを使用しています。しかし、CSS Keyframe Animationを使用する場合にも同じ問題が発生します。

私はまた、次の解決策を使用してこの問題を解決しようとしましたが、状況を改善しましたが、それでも問題はあります。ここでは実際の例では、私はいつものMouseEnter/mouseleaveではなく、マウスオーバー/マウスアウトを使用して成功を収めてきたhttps://jsfiddle.net/x784xwoa/5/

var elm = document.getElementById("target"); 
 
var player = document.getElementById("target"); 
 

 
elm.addEventListener('mouseover', function(event) { 
 
    console.log('mouseover', player.playState, 'animate'); 
 
    player = elm.animate(
 
    [{ 
 
     left: "0px", 
 
     boxShadow: 'rgba(0, 0, 0, 0.5) 0px 0px 0px 0px' 
 
    }, { 
 
     left: "100px", 
 
     boxShadow: 'rgba(0, 0, 0, 0.9) 50px 150px 100px 0px' 
 
    }], { 
 
     duration: 3000, 
 
     direction: "normal", 
 
     fill: "forwards", 
 
     iterations: 1 
 
    } 
 
); 
 
}); 
 

 
elm.addEventListener('mouseout', function(event) { 
 
    console.log('mouseout', player.playState, 'reverse'); 
 
    player.reverse(); 
 
});

#target { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100px; 
 
    height: 150px; 
 
    background-color: red; 
 
}

<div id="target"></div>

Answer 1

次のスクリプトを使用してこの問題を解決できました。確認するロジックを追加しましたplayState。 あなたがより良い解決策を持っている場合は、本当にあなたのご意見をお寄せいただければ幸いです。

document.addEventListener("DOMContentLoaded", function (event) { 
 
      var elm = document.getElementById("target"); 
 
      var player = null; 
 

 

 

 
      elm.addEventListener('mouseenter', function (event) { 
 
       if (player === null) { 
 
        player = elm.animate(
 
         [{ 
 
          left: "0px", 
 
          boxShadow: 'rgba(0, 0, 0, 0.5) 0px 0px 0px 0px' 
 
         }, { 
 
          left: "100px", 
 
          boxShadow: 'rgba(0, 0, 0, 0.9) 50px 150px 100px 0px' 
 
         }], { 
 
          duration: 3000, 
 
          direction: "normal", 
 
          fill: "forwards", 
 
          iterations: 1 
 
         } 
 
        ); 
 
       } 
 
       else if (player.playState === 'running') { 
 
        player.reverse(); 
 
       } 
 
       else if (player.playState === 'finished') { 
 
        player.reverse(); 
 

 
       } 
 
      }); 
 

 
      elm.addEventListener('mouseout', function (event) { 
 
       if (player.playState === 'running' || player.playState === 'finished') { 
 
        player.reverse(); 
 
       } 
 
      }); 
 

 
      setInterval(function() { 
 
       if (player) { 
 
        console.log(player.playState); 
 
       } 
 
      }, 1000); 
 

 

 
     });

 #target { 
 
      position: relative; 
 
      top: 0; 
 
      left: 0; 
 
      width: 100px; 
 
      height: 150px; 
 
      background-color: red; 
 
     }

<div id="target"></div>

Answer 2

です。

しかし、同じ方法で動作しますが、mouseenterイベントは、マウスポインタが選択された要素に入るときにのみトリガします。マウスポインターが子要素にも入ると、mouseoverイベントがトリガーされます。

Answer 3

mouseoverイベントを使用すると、要素の新しいアニメーションを作るトリガーされるたびに。あらかじめアニメーションを作成し、使用するまでアニメーションを一時停止することでこれを回避します。

また、player.reverse();をplayer.playBackRate = (-)1;に置き換えました。それがどうして問題を引き起こしたのか分かりません。

var elm = document.getElementById("target"); 
 
var player = elm.animate(
 
    [{ 
 
    left: "0px", 
 
    boxShadow: 'rgba(0, 0, 0, 0.5) 0px 0px 0px 0px' 
 
    }, { 
 
    left: "100px", 
 
    boxShadow: 'rgba(0, 0, 0, 0.9) 50px 150px 100px 0px' 
 
    }], { 
 
    duration: 3000, 
 
    direction: "normal", 
 
    fill: "forwards", 
 
    iterations: 1 
 
    } 
 
); 
 
player.pause(); 
 

 
elm.addEventListener('mouseover', function(event) { 
 
    player.playbackRate = 1; 
 
    player.play(); 
 
}); 
 

 
elm.addEventListener('mouseout', function(event) { 
 
    player.playbackRate = -1; 
 
});

#target { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100px; 
 
    height: 150px; 
 
    background-color: red; 
 
}

<div id="target"></div>

残る唯一の問題は、要素がマウスの下から移動したときマウスアウトイベントは発生しませんということです。マウスを動かすと起動します。