Question

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

目前，如果用户在动画期间移入/移出鼠标，动画会生涩，我的效果不会很好。

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

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

我也尝试使用以下解决方案解决此问题，这改善了这种情况，但仍然存在问题。这是一个实例https://jsfiddle.net/x784xwoa/5/

target

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;
}

Answer 1

我总是使用 mouseenter / mouseleave 而不是鼠标悬停 / mouseout 取得成功。< / p>

尽管它们以相同的方式运行，但mouseenter事件仅在鼠标指针进入所选元素时触发。如果鼠标指针也进入任何子元素，则会触发mouseover事件。

Answer 2

我能够使用以下脚本添加一些逻辑来检查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 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>

剩下的唯一问题是当元素从鼠标下方移动时，mouseout事件不会触发。它仅在鼠标移动时触发。

使用鼠标悬停和鼠标移除时避免抖动动画

3 个答案: