javascript - Snap.svg 悬停/取消悬停错误(长时间悬停)

Question

如果我画一个圆圈，然后像这样设置动画 - 一切正常:

  var s = Snap(200,200);
  var c = s.circle(100,100,100);

  c.hover(function(){
  c.animate({fill:"red"}, 500, mina.easeinout);
  }, function() {
  c.animate({ fill:"black" }, 500, mina.easeinout);   
  });

悬停时颜色更改为红色，“取消悬停”时颜色变回黑色。但是，如果我将第二个函数(取消悬停)中的时间设置为 1500 而不是 500，您会注意到，如果您将鼠标悬停在圆圈上，然后取消悬停并在不到 1.5 秒的时间内再次悬停(在圆圈再次变黑之前)，它将动画为全红色，然后快速变黑，没有动画。这是演示: https://jsfiddle.net/Drasik/5bcu4rc5/1/

为什么会发生这种情况以及如何解决它？谢谢!

Answer 1

黑色动画仍在运行，所以如果你在悬停500毫秒后再次悬停，你就是在告诉它在500毫秒内变成红色，然后在1000毫秒内再次变黑(我认为浏览器会感到困惑，因此突然发生) .

为了避免这种情况，您可以尝试在重新悬停时停止淡入黑色动画，如下所示 ( https://jsfiddle.net/5bcu4rc5/3/ ):

c.hover(function(){
    c.stop(); // stops the black fill from continuing
    c.animate({fill:"red"}, 500, mina.easeinout);
}, function() {
    c.animate({ fill:"black" }, 1500, mina.easeinout);
});

如果您想在红色填充开始之前强制运行完整的 1500 毫秒，也许是这样的(尽管可能有更好的方法: https://jsfiddle.net/5bcu4rc5/2/ ):

c.hover(function(){
    if (c.className != "unhovering") {
        c.animate({fill:"red"}, 500, mina.easeinout);
    }
}, function() {
    c.className = "unhovering";
    c.animate({ fill:"black" }, 1500, mina.easeinout, function() {
        c.className = "";
    });
});