本文介绍一种基于 javascript 状态管理的 css 动画控制方案，解决「悬停触发正向旋转（-8° → 0°），鼠标离开后平滑回弹（0° → -8°）」的需求，避免元素因样式重置而突兀跳回初始状态。
要实现「鼠标悬停时启动正向旋转动画、离开时自动播放反向回弹动画，且两段动画均需完整执行、不中断、不跳变」，仅靠纯 CSS 的 :hover + transition 或简单 animation 类切换是不够的——因为 CSS 无法感知动画是否正在运行，也无法在动画中途响应 hover 状态变化。必须引入 JavaScript 进行动画生命周期监控与状态协同判断。
✅ 核心思路：双状态驱动
我们维护两个独立但关联的状态：
- Hover 状态：通过 element.matches(':hover') 实时检测（比 mouseenter/mouseleave 更可靠，尤其应对快速进出场景）；
- 动画状态：用 Map 映射每个元素到其当前动画阶段（backward / forward / rotatingForward / rotatingBackward）。
只有当「当前处于 forward 状态且不再 hover」时，才触发回弹；同理，「当前处于 backward 状态且开始 hover」才触发正向旋转。这样确保动画不会被覆盖或打断。
✅ 关键技术点说明
- animation-fill-mode: forwards：必须显式设置（代码中通过 style.animation = "... forwards" 实现），否则动画结束后元素会立即恢复原始 transform 值，造成“闪回”。
- 监听 animationstart 和 animationend：精准捕获动画启停时刻，及时更新状态映射。
- 直接操作 element.style.animation：比切换 class 更可控，旧动画会自动终止，新动画立即接管（无需手动 removeClass）。
✅ 完整可运行代码示例
<!DOCTYPE html>
<html>
<head>
<style>
.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); /* 初始角度 */
cursor: pointer;
}
@keyframes rotate-forward {
from { transform: rotate(-8deg); }
to { transform: rotate(0deg); }
}
@keyframes rotate-backward {
from { transform: rotate(0deg); }
to { transform: rotate(-8deg); }
}
</style>
</head>
<body>
<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>
<script>
const rotateForwardAnimationName = 'rotate-forward';
const rotateBackwardAnimationName = 'rotate-backward';
const states = {
forward: 'forward',
backward: 'backward',
rotatingForward: 'rotatingForward',
rotatingBackward: 'rotatingBackward',
};
const elements = document.querySelectorAll('.polaroid');
const stateMap = new Map();
// 初始化所有元素为 backward 状态
elements.forEach(el => stateMap.set(el, states.backward));
elements.forEach(element => {
// 监听动画事件
element.addEventListener('animationstart', (e) => {
if (e.animationName === rotateForwardAnimationName) {
stateMap.set(element, states.rotatingForward);
} else if (e.animationName === rotateBackwardAnimationName) {
stateMap.set(element, states.rotatingBackward);
}
onStateUpdate(element);
});
element.addEventListener('animationend', (e) => {
if (e.animationName === rotateForwardAnimationName) {
stateMap.set(element, states.forward);
} else if (e.animationName === rotateBackwardAnimationName) {
stateMap.set(element, states.backward);
}
onStateUpdate(element);
});
// 监听 hover 变化（mouseenter/mouseleave 非必需，但增强响应性）
element.addEventListener('mouseenter', () => onStateUpdate(element));
element.addEventListener('mouseleave', () => onStateUpdate(element));
});
function onStateUpdate(element) {
const isHovered = element.matches(':hover');
const currentState = stateMap.get(element);
if (currentState === states.forward && !isHovered) {
rotateBackward(element);
} else if (currentState === states.backward && isHovered) {
rotateForward(element);
}
}
function rotateForward(element) {
element.style.animation = `${rotateForwardAnimationName} 2s forwards`;
}
function rotateBackward(element) {
element.style.animation = `${rotateBackwardAnimationName} 2s forwards`;
}
</script>
</body>
</html>⚠️ 注意事项
- 不要使用 transition 混合 animation：二者机制不同，混合易导致行为不可控；
- 避免在 :hover 中直接写 transform：这会覆盖 animation 的 forwards 效果，造成跳变；
- 若需支持旧版 IE，请补充 -ms-transform 等前缀（现代项目通常可忽略）；
- 多个元素共用同一套逻辑？✅ querySelectorAll + forEach 已天然支持。
✅ 总结
该方案将「动画控制权」从 CSS 移交至 JS，通过精细化的状态协同，实现了真正符合直觉的悬停交互体验：动画不中断、不跳帧、不重置，进退皆从容。适用于 Polaroid 相框、卡片翻转、图标悬停动效等需要精确时序控制的 UI 场景。
