动画在SVG悬停动画上未完成过渡，当悬停快速发生时

Question

我已经使用SVG图标为缩略图制作了一个非常简单的悬停动画。参见here。我使用的JS代码是这样的：

var elemRemoveAnim = null;

$('.vedio-thumb').hover(
    function(){
            $(this).find('.youtube-icon > .youtube-red')[0].classList.add('y-animated' , 'fadeInUp');
            $(this).find('.youtube-icon > .youtube-white')[0].classList.add('y-animated' , 'fadeInUp');
    }, 
    function(){
            removeVedioAnim($(this));
});


function removeVedioAnim(elem) {
    elemRemoveAnim = elem;
    setTimeout(function(){
        elemRemoveAnim.find('.youtube-icon > .youtube-red')[0].classList.remove('y-animated' , 'fadeInUp');
        elemRemoveAnim.find('.youtube-icon > .youtube-white')[0].classList.remove('y-animated' , 'fadeInUp');
    }, 1000);
}

如你所见，在延迟1000ms之后，我正在尝试删除动画类，这是因为如果你将鼠标悬停在上面并立即悬停(你必须非常快地做)，你会注意到动画被卡住了，即白色箭头仍然只处于半过渡状态。从技术上讲，这是因为动画类被移除得太快了。

如果我在hover out函数中添加代码，这会使情况变得更糟。有没有更通用的解决方案来解决这个问题？

这个解决方案的另一个问题是，一旦你悬停了，然后如果你悬停了2-3次，速度真的很快，对于你悬停的2-3次，动画只会播放一次，简单地说，setTimeout函数将等待1秒来删除类。我想知道是否有更优雅的方法来做到这一点。

Answer 1

1. 使用“fadingInUp end”事件来捕捉箭头运动的结束，这个箭头运行的时间更长(白色的那个)。

$utube_white.one(“webkitAnimationEnd oAnimationEnd"，$utube_white.one(){ $utube_red.get(0).classList.remove('y-animated‘，'fadeInUp')；$utube_white.get(0).classList.remove('y-animated’，'fadeInUp')；isLocked = false；})；

• 在您的示例中，鼠标悬停事件中不需要鼠标保存函数，因为您不需要对它做任何特定的操作-只需删除动画类而不做任何其他动作。这可以在第一个"HandlerIn“函数的"Animationend”事件中完成。为了防止jQuery认为你的鼠标悬停函数只包含一个参数，而不是鼠标悬停函数，放入空的$.noop。.hover(handlerIn，$.noop)而不是.hover( handlerInOut )。你可以更改它，这取决于你，但在最后一种情况下，该函数将在MouseOn和MouseOut上触发。

• 也使用标志"isLocked“，以防止在快速悬停时触发HandlerIn。