本文介绍一种通过 javascript 精确控制 css 动画状态的方法，解决悬停触发旋转动画、离开后平滑回退至初始角度的问题，避免“跳变”或状态丢失。
在纯 CSS 中，:hover 触发的 transition 或 animation 很难实现「悬停即启动、离开即回退，且动画不中断、不重置」的效果——尤其当用户快速进出元素时，transition 易因状态覆盖而跳回起始值，animation 则缺乏对播放进度与方向的细粒度控制。
理想行为应是：
- 鼠标进入 → 启动「-8° → 0°」正向旋转动画（若尚未完成）；
- 鼠标离开 → 启动「0° → -8°」反向旋转动画（仅当当前已停在 0° 时）；
- 动画必须完全播放完毕才允许切换方向，杜绝中途打断导致的视觉撕裂；
- 每个元素独立维护自身动画状态，支持多个 .polaroid 实例共存。
为此，我们采用「状态机 + 事件监听」策略，核心在于分离并同步两个关键状态：
- Hover 状态：由 mouseenter / mouseleave 实时感知；
- 动画状态：通过 animationstart / animationend 事件结合 animationName 判断当前处于 forward（正向）、backward（反向）、rotatingForward 或 rotatingBackward 四种之一。
以下是完整可运行的实现方案：
✅ 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>
✅ 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); }
}✅ JavaScript 控制逻辑（状态驱动、高鲁棒性）
const ROTATE_FORWARD = 'rotate-forward';
const ROTATE_BACKWARD = 'rotate-backward';
// 四种互斥动画状态
const STATES = {
backward: 'backward',
forward: 'forward',
rotatingForward: 'rotatingForward',
rotatingBackward: 'rotatingBackward'
};
const elements = document.querySelectorAll('.polaroid');
const stateMap = new Map();
// 初始化每个元素的状态为 'backward'（即静止在 -8°）
elements.forEach(el => {
stateMap.set(el, STATES.backward);
});
// 监听所有关键事件
elements.forEach(el => {
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);
}
updateElementState(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);
}
updateElementState(el);
});
el.addEventListener('mouseenter', () => updateElementState(el));
el.addEventListener('mouseleave', () => updateElementState(el));
});
function updateElementState(el) {
const isHovered = el.matches(':hover');
const state = stateMap.get(el);
// 状态决策表（核心逻辑）
if (state === STATES.forward && !isHovered) {
// 已转到 0° 且鼠标离开 → 启动回退
el.style.animation = `${ROTATE_BACKWARD} 2s forwards`;
} else if (state === STATES.backward && isHovered) {
// 静止在 -8° 且鼠标进入 → 启动正向
el.style.animation = `${ROTATE_FORWARD} 2s forwards`;
}
// 其他状态（如正在旋转中）不触发新动画，确保原子性
}⚠️ 关键注意事项
- animation-fill-mode: forwards 已通过内联样式 forwards 显式声明，确保动画结束后保留最终 transform 值（否则元素会瞬间跳回初始态）；
- 使用 el.matches(':hover') 而非 onmouseover/onmouseout，规避事件冒泡与延迟触发问题；
- for...of 替代旧式 for 循环（避免 i <= length 导致越界错误）；
- 所有动画均通过 element.style.animation 直接设置，自动覆盖前序动画，无需手动 classList.remove()；
- 若需兼容 IE，可在 @keyframes 中补全 -ms-transform，但建议优先保障现代浏览器体验。
此方案将动画控制权交还给 JavaScript，以清晰的状态流转替代脆弱的 CSS 伪类耦合，既满足设计需求，又具备良好的可扩展性（如后续增加暂停/重播按钮，只需新增对应状态分支即可）。
