JavaScript如何等待mouseenter动画执行完毕后再触发mouseleave动画

方案1：CSS实现（优先推荐，无需额外JS逻辑） #

你只需调整CSS的过渡配置，给鼠标离开的动画设置和进入动画时长一致的延迟，即可保证进入动画播放完成后才触发离开动画。示例如下：

.footer-links {
  /* 原有基础样式 */
  /* 鼠标进入时立即触发动画，动画时长可按需调整，此处示例为0.3s */
  transition: all 0.3s ease 0s;
}
/* 非hover状态下，延迟触发过渡，延迟时长和进入动画时长保持一致 */
.footer-links:not(:hover) {
  transition-delay: 0.3s;
}
.footer-links.hover {
  /* 你定义的hover状态样式 */
}

方案2：JS控制（适合复杂动画场景） #

如果你的动画逻辑较复杂，需要更精准的时序控制，可以通过状态标记实现动画队列管理，代码如下：

// 初始化每个元素的状态标记
$('.footer-links').each(function() {
  const $target = $(this);
  $target.data('isAnimating', false);
  $target.data('pendingLeave', false);
  
  // 监听动画/过渡结束事件，自动更新状态
  $target.on('animationend transitionend', function() {
    $target.data('isAnimating', false);
    // 执行暂存的mouseleave操作
    if ($target.data('pendingLeave')) {
      $target.removeClass('hover');
      $target.data('pendingLeave', false);
    }
  });
});

$('.footer-links').on('mouseenter', function() {
  const $target = $(this);
  if ($target.data('isAnimating')) {
    // 动画播放中再次触发enter，清空之前暂存的leave操作
    $target.data('pendingLeave', false);
    return;
  }
  $target.data('isAnimating', true);
  $target.addClass('hover');
});

$('.footer-links').on('mouseleave', function() {
  const $target = $(this);
  if ($target.data('isAnimating')) {
    // 动画未播放完，暂存leave操作
    $target.data('pendingLeave', true);
    return;
  }
  $target.removeClass('hover');
});

注意事项 #

• 如果你使用jQuery内置的animate()方法实现动画，可以直接用:animated选择器判断播放状态，无需额外维护状态标记。
• 请确保监听的事件和你实际使用的动画类型匹配，用CSS transition就监听transitionend，用CSS animation就监听animationend。

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