Question

我有一个元素，当页面加载时，动画通过animate.css应用于它......

<div class="logo></div>

...添加了反弹类，动画完成后，将删除反弹类：

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

一旦执行了上述操作，我希望动画现在在“.logo”悬停时发生：

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

但是，徽标悬停后，“.bounce”类将被删除，只有当鼠标离开徽标时才会出现动画：

$('.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源代码，如果您希望动画是连续的，则它们可用的类是.infinite，并且只有一个与之关联的规则：animation-iteration-count: infinite;

这意味着您只需将该属性添加到:hover选择器即可关闭并运行 - 无需JS。

Codepen：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; 
}

如何将一个类添加到元素并将其保留在那里直到鼠标离开animate.css？

2 个答案: