3

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>

4

3 に答える 3

1

I've always had success using mouseenter / mouseleave rather than mouseover / mouseout.

Though they operate the same way, however, the mouseenter event only triggers when the mouse pointer enters the selected element. The mouseover event is triggered if a mouse pointer enters any child elements as well.

于 2016-11-21T13:40:30.610 に答える
0

チェックするロジックを追加する次のスクリプトを使用して、この問題を解決できました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>

于 2016-11-21T14:10:45.870 に答える
0

マウスオーバー イベントがトリガーされるたびに、要素の新しいアニメーションを作成します。これを回避するには、アニメーションを事前に作成し、使用するまで一時停止します。

にも交換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 イベントが発生しないことです。マウスが動かされたときにのみ発火します。

于 2016-11-21T14:35:52.683 に答える