如何将 class 添加到元素并保持它在那里直到鼠标离开 animate.css？

Question

我有一个元素，在页面加载时通过 animate.css 对其应用动画...

<div class="logo></div>

...添加弹跳 class，当动画完成后，弹跳 class 被移除：

$(".logo").addClass("bounce");
$('.logo').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
  $(this).toggleClass("bounce");
});

执行完上述操作后，我希望在悬停“.logo”时出现动画：

$(".logo").hover(function () {
  $(this).toggleClass("bounce");
});

但是，在徽标悬停后，“.bounce”class 被删除，动画仅在鼠标离开徽标时出现，原因如下：

$('.logo').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
  $(this).toggleClass("bounce");
});

如何编写代码，使动画不仅在页面加载时出现，而且仅在徽标悬停时出现，而不是在鼠标离开时出现？

Answer 1

您可以使用 .off(...) 删除第一个附加事件，然后添加新的悬停事件：

$(".logo").addClass("bounce");

$('.logo').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){

  $(this).removeClass("bounce");

  $('.logo').off('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend');

  $( ".logo" ).hover(
    function() {
      $( this ).addClass( "bounce" );
    }, function() {
      $( this ).removeClass( "bounce" );
    }
  );

});

Answer 2

这个问题让我开始思考，尽管已经有一个已被接受的答案，但这里还是免费的。我开始想知道是否有没有 JavaScript 的方法来做到这一点，因为 :hover 显然在 CSS.

中可用

查看 animate.css 来源，如果您希望动画连续，他们提供的 class 是 .infinite 并且只有一个与之相关的规则：animation-iteration-count: infinite;

这意味着您只需将属性添加到您的 :hover 选择器，然后您就可以了运行 - 不需要 JS。

代码笔：https://codepen.io/anon/pen/QaBKdq

HTML:

<!-- Animation will run once on page load by adding classes 'bounce' 
     and 'animated' directly in the markup -->
<div class="logo animated bounce></div>

CSS:

/** Make Animation continuous when hovered**/
.logo:hover {
   animation-iteration-count: infinite;
}

作为奖励，如果您在 SCSS 编译中包含 animate.css，您也可以只使用 @extend 语法，在这种情况下它非常巧妙：

.logo:hover {
  @extend .infinite; 
}

如何将 class 添加到元素并保持它在那里直到鼠标离开 animate.css？

How do I add a class to an element and keep it there until the mouse leaves with animate.css?

jquery

html

css

animate.css