本文介绍如何在用户点击元素时立即终止当前 hover 动画，并无缝启动新的 css 动画，核心在于用 animation 替代 transition，配合 :not(.no-hover):hover 选择器动态禁用悬停行为。

在 Web 动画开发中，一个常见痛点是：当元素正执行 :hover 触发的 transition 动画（如 transform: translateY(-5px)）时，若用户突然点击，浏览器不会自动中断该过渡过程——它会继续运行至完成，导致后续添加的 .transform-active 类动画（如缩放）与残留的 hover 状态冲突，出现卡顿、跳变或动画失效。

根本原因在于 transition 是“状态驱动”的被动响应机制，而 animation 是主动声明式的时序控制。因此，推荐解法是将 hover 效果改写为 @keyframes 动画，并通过 CSS 类开关精确控制其启用/禁用。

✅ 正确实现步骤

1. 移除 transition，改用 animation 定义 hover 行为
   使用 @keyframes raise 明确定义悬停动画，并在 :not(.no-hover):hover 中调用，确保添加 .no-hover 后，:hover 规则彻底失效。

2. 点击时同步添加禁用类与目标动画类
   无需 setTimeout 延迟：animation 默认不叠加，新动画会立即覆盖旧动画（前提是使用 forwards 填充模式保持最终状态）。

3. 关键 CSS 规则说明

   

   Java Api Extractor

   从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

   下载

   .grid-item:not(.no-hover):hover {
     animation: raise 0.3s ease-in-out;
     background-color: #5463cd;
   }
   
   .grid-item.transform-active {
     animation: embiggen 0.3s forwards; /* forwards 保持 scale(1.2) 状态 */
   }
   
   @keyframes raise {
     to { transform: translateY(-5px); }
   }
   
   @keyframes embiggen {
     to { transform: scale(1.2); }
   }

4. JavaScript 逻辑极简可靠

   立即学习“前端免费学习笔记（深入）”；

   const gridItems = document.querySelectorAll('.grid-item');
   gridItems.forEach(item => {
     item.addEventListener('click', () => {
       item.classList.add('no-hover', 'transform-active');
     });
   });

⚠️ 注意事项

• 避免混用 transition 和 animation 控制同一属性（如 transform），否则行为不可预测；
• 若需恢复 hover 功能（例如二次点击），可扩展逻辑：item.classList.toggle('no-hover') 并重置动画类；
• visibility: hidden 不影响动画渲染，如需彻底移除元素视觉占位，请改用 display: none 或 opacity: 0 + pointer-events: none。

此方案轻量、语义清晰，完全基于原生 CSS 能力，无依赖、无副作用，是现代前端动画控制的最佳实践之一。