javascript - 使用 mouseover 和 mouseout 时避免抖动动画

Question

我正在使用 Web Animation API创建一个简单的动画，以便当用户将鼠标移到 target 上时，动画应该从左到右开始，当用户将鼠标移离 target 时，动画应该反转，target 应该从右向左移动。

目前如果用户在动画过程中将鼠标移入/移出，动画会出现抖动，我没有流畅的效果。

我想知道如何解决这个问题。

注意:目前我正在使用 Web Animation API。但是使用 CSS 关键帧动画时会出现同样的问题。

我也曾尝试使用以下解决方案解决此问题，这改善了情况，但仍然存在问题。这是一个活生生的例子 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

我总是使用 mouseenter/mouseleave 而不是 mouseover/mouseout 取得成功。

虽然它们的操作方式相同，但是 mouseenter 事件仅在鼠标指针进入所选元素时触发。如果鼠标指针也进入任何子元素，则会触发 mouseover 事件。