如何通过 CSS 动画与类控制精准中断 hover 效果并触发新动画

本文介绍如何用 animation 替代 transition 实现 hover 动画的可控中断，并在点击时立即停止当前 hover 动画、无缝启动新动画，避免过渡冲突与状态残留。

在 CSS 中，hover 配合 transition 的常见写法（如 transform: translateY(-5px)）存在一个关键限制：transition 是“状态驱动”的，无法被 JavaScript 主动中断或重置。当用户 hover 元素后快速点击，:hover 状态可能尚未退出，而 transition 仍在执行中，导致后续 .transform-active 的 transform: scale(1.2) 被 transition 过渡覆盖或延迟生效——这就是你遇到“动画不响应”“效果卡顿”或“缩放未触发”的根本原因。

✅ 正确解法是：将 hover 动画改为 @keyframes + animation，并通过添加/移除类精确控制动画播放与终止。CSS 动画（animation）具有明确的播放生命周期，添加 .no-hover 类可直接让 :not(.no-hover):hover 规则失效，从而彻底禁用 hover 动画；而 .transform-active 类触发的新动画则独立运行，互不干扰。

以下是优化后的完整实现：

/* 基础样式（补充尺寸以便可见） */
.grid-item {
  height: 100px;
  width: 200px;
  border-radius: 12px;
  background-color: #3d499b;
  box-shadow: 5.5px 5.5px #1e286c;
  border: 2px solid black;
  cursor: pointer;
}

/* Hover 动画：仅在未加 .no-hover 时生效 */
.grid-item:not(.no-hover):hover {
  animation: raise 0.3s ease-in-out forwards;
  background-color: #5463cd;
}

/* 点击激活动画（独立、可覆盖） */
.grid-item.transform-active {
  animation: embiggen 0.3s ease-out forwards;
}

/* 关键帧定义 */
@keyframes raise {
  from { transform: translateY(0); }
  to   { transform: translateY(-5px); }
}

@keyframes embiggen {
  from { transform: scale(1); }
  to   { transform: scale(1.2); }
}

const gridItems = document.querySelectorAll('.grid-item');

gridItems.forEach(item => {
  item.addEventListener('click', function() {
    // 1. 立即禁用 hover 动画（移除 :hover 匹配）
    this.classList.add('no-hover');
    // 2. 触发新动画（无需 setTimeout！动画立即开始）
    this.classList.add('transform-active');

    // ✅ 可选：若需复位，可监听动画结束事件
    // this.addEventListener('animationend', () => {
    //   this.classList.remove('transform-active');
    // }, { once: true });
  });
});

⚠️ 注意事项：

• 不要混用 transition 和 animation 控制同一属性（如 transform），否则行为不可预测；
• animation: ... forwards 确保动画结束后保留最终状态（如 scale(1.2)），避免闪回；
• .no-hover 必须作用于父选择器（.grid-item:not(.no-hover):hover），这是禁用 hover 的核心逻辑；
• 若需支持多次点击切换，可添加 this.classList.toggle('transform-active') 并配合 animation-play-state 或重置类。

这种基于动画声明式控制的方式，语义清晰、性能稳定，且完全规避了 transition 的状态耦合问题，是现代交互动画的最佳实践之一。