通过 css 动画（而非 `transition`）配合类名控制，可精准中断悬停效果并立即播放点击动画，避免过渡冲突与状态竞争。
在 Web 动画开发中，一个常见痛点是：当元素同时绑定 :hover 过渡（如 transform: translateY(-5px)）和点击触发的动画（如缩放）时，点击瞬间常出现视觉卡顿、动画跳变或无法生效——根本原因在于 transition 依赖属性变化的“起始值”，而悬停态与点击态的 transform 值相互干扰，浏览器难以无缝衔接。
正确解法是改用 CSS 动画（@keyframes + animation）替代 transition 实现悬停效果。因为动画具有明确的起止帧、可被类名原子性启停，且添加/移除动画类会立即覆盖当前动画状态，天然支持“点击即中断悬停、启动新动画”的行为。
以下是完整实现方案：
✅ HTML 结构（保持简洁）
<div class="grid-item" id="1"></div>
✅ CSS 样式（关键改造点）
.grid-item {
height: 100px;
width: 50%;
border-radius: 12px;
background-color: #3d499b;
box-shadow: 5.5px 5.5px #1e286c;
border: 2px solid black;
}
/* 悬停动画：仅在未禁用 hover 时生效 */
.grid-item:not(.no-hover):hover {
animation: raise 0.3s ease-in-out forwards; /* 添加 forwards 保持最终态 */
background-color: #5463cd;
}
/* 点击激活动画 */
.grid-item.transform-active {
animation: embiggen 0.3s forwards;
}
/* 定义动画帧 */
@keyframes raise {
from { transform: translateY(0); }
to { transform: translateY(-5px); }
}
@keyframes embiggen {
from { transform: scale(1); }
to { transform: scale(1.2); }
}✅ JavaScript 逻辑（极简可靠）
const gridItems = document.querySelectorAll('.grid-item');
gridItems.forEach(item => {
item.addEventListener('click', () => {
// 1. 立即禁用 hover 动画（移除悬停响应）
item.classList.add('no-hover');
// 2. 触发新动画（无需 setTimeout，动画立即开始）
item.classList.add('transform-active');
});
});? 为什么这样更可靠？
- animation 是声明式、离散的状态切换，添加 .transform-active 类会强制终止当前所有 animation（包括悬停动画），并从头播放新动画；
- transition 是隐式插值，依赖属性当前值，点击时若悬停态未退出（如鼠标仍悬停），transform 值处于中间态，导致缩放动画起点错误；
- forwards 关键字确保动画结束后保留最终样式（如 transform: scale(1.2)），避免样式回退。
⚠️ 注意事项
- 若需点击后恢复悬停功能，可添加重置逻辑：item.classList.remove('no-hover', 'transform-active')；
- 避免对同一属性（如 transform）同时使用 transition 和 animation，会造成不可预测的行为；
- 如需兼容旧浏览器，animation 支持度远高于 transition 的高级 timing function，但建议至少支持 IE10+。
此方案以语义清晰、零延迟、高可控性，成为现代交互动画的最佳实践之一。
