本文介绍如何在用户点击元素时立即终止当前 hover 动画，并无缝启动新的 css 动画，核心在于用 animation 替代 transition，配合 :not(.no-hover):hover 选择器动态禁用悬停行为。
在 Web 动画开发中，一个常见痛点是：当元素正执行 :hover 触发的 transition 动画（如 transform: translateY(-5px)）时，若用户突然点击，浏览器不会自动中断该过渡过程——它会继续运行至完成，导致后续添加的 .transform-active 类动画（如缩放）与残留的 hover 状态冲突，出现卡顿、跳变或动画失效。
根本原因在于 transition 是“状态驱动”的被动响应机制，而 animation 是主动声明式的时序控制。因此，推荐解法是将 hover 效果改写为 @keyframes 动画，并通过 css 类开关精确控制其启用/禁用。
✅ 正确实现步骤
-
移除 transition，改用 animation 定义 hover 行为
使用 @keyframes raise 明确定义悬停动画，并在 :not(.no-hover):hover 中调用，确保添加 .no-hover 后，:hover 规则彻底失效。 -
点击时同步添加禁用类与目标动画类
无需 setTimeout 延迟：animation 默认不叠加，新动画会立即覆盖旧动画（前提是使用 forwards 填充模式保持最终状态）。 -
关键 CSS 规则说明
.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); } } -
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 能力，无依赖、无副作用，是现代前端动画控制的最佳实践之一。