代码之家 › 专栏 › 技术社区 › Weebs

如何将类添加到元素并将其保持在那里,直到鼠标离开动画。css?

animate.css css html jquery

Weebs · 技术社区 · 7 年前

我有一个元素,其中动画通过动画应用于它。页面加载时的css。。。

<div class="logo></div>

...将添加“反弹”(bounce)类,动画完成后,将删除“反弹”(bounce)类:

$(".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");
});

如何编写代码,使动画不仅在页面加载时发生,而且在徽标悬停时发生,而不是在鼠标离开时发生?

2 回复 | 直到 7 年前

D.B. 7 年前

您可以使用删除第一个附加的事件 .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" );
    }
  );

});

ryantdecker 7 年前

这一个让我思考,所以这里有一个免费的,尽管已经有一个公认的答案。我开始想,如果没有JavaScript,是否有办法做到这一点,因为 :hover 在CSS中显然可用。

查看动画。css源,如果希望动画连续,则它们提供的类是 .infinite 只有一条规则与之相关: animation-iteration-count: infinite;

这意味着您可以简单地将该属性添加到 :悬停 选择器,您就可以关闭并运行了-无需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: