ruckelt Animation zu vermeiden, wenn Mouseover mit und mouseOut

Question

ich Web Animation API verwende eine einfache Animation zu erstellen, so dass, wenn ein Benutzer die Maus auf den target bewegt, sollte die Animation von links nach rechts beginnen und wann fährt der Benutzer mit der Maus aus den target , sollte die Animation umgekehrt werden und die target sollte sich von rechts nach links bewegen.

Zeit, wenn der Benutzer die Maus in/out bewegt sich während der Animation, ist die Animation ruckartig, und ich keine glatte Wirkung haben.

Ich mag würde wissen, wie dieses Problem zu lösen.

Hinweis: Zur Zeit bin ich mit dem Web-Animations-API. Dasselbe Problem tritt jedoch auf, wenn Sie die CSS-Keyframe-Animation verwenden.

Ich habe auch versucht, dieses Problem zu lösen, die folgende Lösung, die die Situation verbessert, aber es ist nach wie vor problematisch. Hier ist ein anschauliches Beispiel 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

konnte ich dieses Problem mit dem folgende Skript lösen einig Logik Hinzufügen playState zu überprüfen. Falls Sie eine bessere Lösung haben, senden Sie diese bitte als Antwort, da ich wirklich an Ihrem Feedback interessiert wäre.

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

ich immer Erfolg gehabt haben mit MouseEnter-/mouseleave statt Mouseover/mouseOut.

Obwohl sie auf die gleiche Weise funktionieren, wird das Ereignis mouseenter nur ausgelöst, wenn der Mauszeiger das ausgewählte Element betritt. Das Ereignis mouseover wird ausgelöst, wenn ein Mauszeiger auch auf untergeordnete Elemente trifft.

Answer 3

Jedes Mal, wenn das Mouseover-Ereignis ausgelöst wird Sie eine neue Animation für das Element zu machen. Vermeiden Sie dies, indem Sie die Animation vorher erstellen und sie anhalten, bis sie verwendet wird.

I ersetzt auch player.reverse(); mit player.playBackRate = (-)1;. Ich bin mir nicht sicher, warum das auch Probleme verursacht hat.

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>

Die einzige Frage, die bleibt, ist, dass die mouseout Ereignis nicht ausgelöst wird, wenn das Element bewegt sich von der Unterseite der Maus. Es wird nur ausgelöst, wenn die Maus bewegt wird.