本文详解 CSS 动画跳过执行的根本原因，指出 animation-fill-mode: forwards 缺失与布局模型不匹配是主因，并提供基于 position: absolute + left 位移的可靠解决方案，确保标题栏与侧边栏动画同步、无空白间隙。
本文详解 css 动画跳过执行的根本原因，指出 `animation-fill-mode: forwards` 缺失与布局模型不匹配是主因，并提供基于 `position: absolute` + `left` 位移的可靠解决方案，确保标题栏与侧边栏动画同步、无空白间隙。
在使用 CSS @keyframes 配合 JavaScript 动态添加类名触发动画时，常见“动画未执行”或“瞬间完成”的假象，本质并非代码错误，而是浏览器渲染机制与 CSS 动画属性协同逻辑未被正确满足。本例中标题栏（#topDiv）的 .shrinkTopBar 动画被跳过，核心问题在于两点：
- 缺少 animation-fill-mode: forwards：默认情况下，动画结束后会恢复初始状态（from 帧），导致视觉上“闪回”，尤其当 JS 同步修改了 style.width 时，会覆盖动画效果，造成“跳过”错觉；
- width 动画在流式布局中受限：#topDiv 原为 display: flex 子元素，默认占据父容器全宽（100vw）。直接对 width 执行动画，在 flex 容器内易受主轴尺寸约束干扰，且无法与侧边栏的 transform 动画形成空间协同。
✅ 正确解法是将标题栏设为 脱离文档流的绝对定位元素，通过 left 和 width 联合控制其水平位置与尺寸，再配合 animation-fill-mode: forwards 锁定终态：
#topDiv {
position: absolute; /* 关键：脱离 flex 布局影响 */
top: 0;
left: 0;
background-color: #A167A5;
height: 6vw;
width: 100vw; /* 初始宽度 */
z-index: 100; /* 确保位于 sidebar 上方 */
}
.shrinkTopBar {
position: absolute; /* 继承或显式声明 */
animation-name: openingSidebarTitle;
animation-duration: 1s;
animation-timing-function: linear;
animation-fill-mode: forwards; /* ✅ 必须添加：保持动画结束状态 */
}
@keyframes openingSidebarTitle {
from {
left: 0;
width: 100vw;
}
to {
left: 25vw; /* 向右偏移 25vw，等效“被推开” */
width: 75vw;
}
}
同时，需确保 body 设置 position: relative 作为 #topDiv 的定位上下文：
body {
position: relative; /* 使 #topDiv 的 absolute 定位以此为基准 */
display: flex;
margin: 0;
padding: 0;
}
⚠️ 注意事项：
- 不要混用 style.width = "75vw" 与 CSS 动画 —— JS 直接设置内联样式会覆盖动画中的 width 声明，导致动画无效。应完全交由 CSS 动画控制尺寸变化；
- 侧边栏 .animatedSidebar 可保留 transform 动画（性能更优），但需确保其 z-index 低于标题栏，避免遮挡；
- sidebar.style.display = "flex" 应在添加动画类前执行，否则浏览器可能因元素隐藏而跳过动画帧；
- 推荐使用 requestAnimationFrame 或 setTimeout(..., 0) 延迟类名添加，确保 DOM 重排（reflow）完成后再触发动画（本例中非必需，但属最佳实践）。
最终效果：点击菜单按钮后，侧边栏从左外侧滑入，标题栏同步向右平移并缩窄，二者无缝衔接，无空白间隙，动画流畅且可复现。此方案兼顾兼容性与性能，适用于所有现代浏览器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
