本文详解如何通过 javascript 精确控制 css 动画状态，实现元素在 hover 时从 -8° 旋转至 0°、鼠标离开后平滑返回 -8° 的无缝过渡效果，避免“跳变”或状态丢失。
要实现「悬停触发正向旋转 → 停留在目标角度 → 鼠标离开后平滑反向旋转回起始角度」这一行为，仅靠纯 CSS :hover + transition 或简单类名切换是不够的：transition 在鼠标移出瞬间会中断当前状态并立即插值回初始值，导致“突兀回弹”；而基于 animation 的类名切换又缺乏对动画生命周期的细粒度感知，容易因重复触发造成状态错乱。
✅ 正确解法是将动画控制权交还 JavaScript，通过监听 animationstart/animationend 与 mouseenter/mouseleave 事件，构建双状态机（hover 状态 + 动画执行状态），确保：
- 动画一旦开始，必须完整播放完毕（animation-fill-mode: forwards 是关键）；
- 只有在动画真正结束且状态匹配时，才触发下一段动画；
- 多个元素可独立运行，互不干扰。
以下是完整、可直接复用的实现方案：
✅ 核心 JavaScript（推荐 ES6+ 写法）
const ROTATE_FORWARD = 'rotate-forward';
const ROTATE_BACKWARD = 'rotate-backward';
// 四种互斥动画状态
const STATES = {
backward: 'backward', // 已完成反向动画，静止于 -8deg
forward: 'forward', // 已完成正向动画，静止于 0deg
rotatingForward: 'rotatingForward',
rotatingBackward: 'rotatingBackward'
};
const elements = document.querySelectorAll('.polaroid');
const stateMap = new Map();
elements.forEach(el => {
stateMap.set(el, STATES.backward); // 初始状态为 backward
// 监听动画生命周期
el.addEventListener('animationstart', (e) => {
if (e.animationName === ROTATE_FORWARD)
stateMap.set(el, STATES.rotatingForward);
else if (e.animationName === ROTATE_BACKWARD)
stateMap.set(el, STATES.rotatingBackward);
updateState(el);
});
el.addEventListener('animationend', (e) => {
if (e.animationName === ROTATE_FORWARD)
stateMap.set(el, STATES.forward);
else if (e.animationName === ROTATE_BACKWARD)
stateMap.set(el, STATES.backward);
updateState(el);
});
// 监听交互
el.addEventListener('mouseenter', () => updateState(el));
el.addEventListener('mouseleave', () => updateState(el));
});
function updateState(el) {
const isHovered = el.matches(':hover');
const state = stateMap.get(el);
// 状态决策表（核心逻辑）
if (state === STATES.forward && !isHovered) {
rotateBackward(el);
} else if (state === STATES.backward && isHovered) {
rotateForward(el);
}
}
function rotateForward(el) {
el.style.animation = `${ROTATE_FORWARD} 2s forwards`;
}
function rotateBackward(el) {
el.style.animation = `${ROTATE_BACKWARD} 2s forwards`;
}✅ 对应 CSS（精简无冗余）
.polaroid {
width: 280px;
height: 200px;
padding: 10px 15px 100px 15px;
border: 1px solid #bfbfbf;
border-radius: 2%;
background-color: white;
box-shadow: 10px 10px 5px #aaaaaa;
transform: rotate(-8deg); /* 初始角度 */
/* 移除所有 transition，交由 animation 控制 */
}
@keyframes rotate-forward {
from { transform: rotate(-8deg); }
to { transform: rotate(0deg); }
}
@keyframes rotate-backward {
from { transform: rotate(0deg); }
to { transform: rotate(-8deg); }
}✅ HTML 结构（简洁语义化）
<div class="polaroid"> <p class="caption">Just a basic explanation of the picture.</p> </div> <div class="polaroid"> <p class="caption">Second polaroid with same behavior.</p> </div>
⚠️ 关键注意事项
- forwards 不可省略：animation: name 2s forwards 中的 forwards 确保动画结束后样式保持在 to 关键帧状态（如 rotate(0deg)），否则动画一结束就会“闪回”初始值。
- 避免 transition 干扰：CSS 中务必移除所有 transform 相关的 transition，否则它会与 animation 冲突，导致不可预测的混合动画。
- 状态映射需唯一：使用 Map 而非全局变量或 data-* 属性，保证每个 .polaroid 元素拥有独立状态，支持无限扩展。
- 无需 !important 或内联 style 清理：本方案通过覆盖 style.animation 实现原子级控制，旧动画自动终止，无需手动 remove() 类名或清空 style。
✅ 效果验证要点
| 场景 | 预期行为 |
|---|---|
| 首次 hover | 平滑旋转至 0deg，停住 |
| hover 中快速进出多次 | 不触发新动画（因状态为 rotatingForward，不满足触发条件） |
| hover 后 mouseleave | 待正向动画结束，立即启动反向动画，平滑转回 -8deg |
| 移动中突然 hover | 若当前在 rotatingBackward，则停止并等待 hover 触发正向动画（符合状态机设计） |
该方案兼顾健壮性、可维护性与性能——无定时器、无强制重排、无内存泄漏风险，是现代 Web 动画控制的推荐实践。
