如何用animate.css实现页面加载及hover触发动画，鼠标离开不生效？

我来帮你梳理下问题根源，然后给出针对性的解决方案：

问题出在哪？ #

你之前用hover()搭配toggleClass()的写法，加上动画结束自动移除类的逻辑，刚好踩了两个小坑：

1. hover()是mouseenter和mouseleave事件的简写，toggleClass()会在两个事件触发时来回切换类
2. 页面加载动画结束后bounce类被移除，导致鼠标离开时toggleClass()会重新添加该类，反而触发了离开时的动画

解决方案 #

我们拆分逻辑，只在鼠标进入时触发动画，彻底忽略鼠标离开的操作；同时把动画结束移除类的逻辑封装成复用函数，避免重复代码：

// 封装动画结束后移除类的复用函数，兼容多浏览器
function removeAnimationClass($element) {
  $element.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
    $(this).removeClass("bounce");
  });
}

$(function() {
  const $logo = $(".logo");

  // 页面加载时触发一次bounce动画
  $logo.addClass("bounce");
  removeAnimationClass($logo);

  // 仅监听鼠标进入事件，触发动画
  $logo.on('mouseenter', function() {
    // 先移除再添加，避免连续快速hover导致动画叠加失效
    $(this).removeClass("bounce").addClass("bounce");
    removeAnimationClass($(this));
  });
});

代码说明 #

• 封装removeAnimationClass函数：统一处理不同浏览器的动画结束事件，确保动画完成后精准移除bounce类
• 页面加载逻辑：直接给.logo添加动画类，绑定结束移除事件，完成初始动画
• 鼠标悬停逻辑：只监听mouseenter事件，每次进入时先清空动画类再重新添加（解决连续hover时动画不触发的问题），再次绑定结束移除事件；完全不处理mouseleave，所以离开时不会有任何动画触发

这样就能完美实现你想要的效果：页面加载时播放一次bounce动画，之后只有鼠标悬停时播放动画，离开时无任何动作。

内容的提问来源于stack exchange，提问作者Weebs