本文介绍如何用 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 的状态耦合问题，是现代交互动画的最佳实践之一。
