本文详解 CSS 动画跳过执行的根本原因，指出 animation-fill-mode: forwards 缺失与布局冲突（如 flex 容器中元素无法响应 width 动画）是导致动画“瞬移”或完全不触发的关键，并提供基于 position: absolute + left/width 协同动画的可靠解决方案。
本文详解 css 动画跳过执行的根本原因，指出 `animation-fill-mode: forwards` 缺失与布局冲突（如 `flex` 容器中元素无法响应 `width` 动画）是导致动画“瞬移”或完全不触发的关键，并提供基于 `position: absolute` + `left/width` 协同动画的可靠解决方案。
在使用 CSS @keyframes 配合 JavaScript 动态添加 class 实现 UI 动画时，一个常见却容易被忽视的问题是：动画看似“跳过”，实际并未执行。你遇到的标题栏（#topDiv）未按预期从 100vw 平滑收缩至 75vw，而侧边栏动画正常，其根本原因并非 JavaScript 逻辑错误，而是 CSS 动画机制与页面布局模型之间的不匹配。
? 根本原因分析
width 动画在 flex 容器中失效
body { display: flex } 下，子元素（如 #topDiv）默认为 flex item，其尺寸受 flex 布局约束。直接对 width 执行 CSS 动画会被 flex 引擎忽略或覆盖，导致动画帧被跳过——浏览器尝试渲染但布局引擎立即重置尺寸，视觉上表现为“瞬间切换”。缺少 animation-fill-mode: forwards
即使动画成功触发，若未设置 animation-fill-mode: forwards，动画结束后元素会自动恢复到初始状态（即 width: 100vw），造成“闪回”或视觉断层，进一步加剧“动画未运行”的错觉。transform 与 width 混用引发布局竞争
你在 JS 中同时设置了 titleBar.style.width = "75vw" 和 titleBar.classList.add("shrinkTopBar")，这会导致内联样式（高优先级）与动画声明冲突，动画可能被强制中断。
✅ 正确实现方案：position: absolute + left + width 协同动画
最稳定的方式是将标题栏脱离文档流，改用 position: absolute，通过控制 left 与 width 的组合动画模拟“被侧边栏推开”的效果：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
body {
position: relative; /* 为绝对定位提供参照 */
display: flex;
margin: 0;
padding: 0;
}
#topDiv {
position: absolute; /* 关键：脱离 flex 布局约束 */
top: 0;
left: 0;
background-color: #A167A5;
height: 6vw;
width: 100vw; /* 初始宽度 */
z-index: 10;
}
.shrinkTopBar {
animation-name: openingSidebarTitle;
animation-duration: 1s;
animation-timing-function: linear;
animation-fill-mode: forwards; /* ✅ 必须！保持最终状态 */
}
@keyframes openingSidebarTitle {
from {
left: 0;
width: 100%;
}
to {
left: 25%; /* 向右偏移 25vw，等效于“缩进” */
width: 75%; /* 宽度缩减 */
}
}
? 注意：left: 25% + width: 75% 的组合，比单纯修改 width 更可靠——它避免了 flex 布局干扰，且 left 属于 transform 同级的高效属性（现代浏览器可 GPU 加速）。
⚠️ JavaScript 调用注意事项
-
移除内联 width 设置：动画应完全由 CSS 控制，JS 仅负责开关 class：
// ✅ 正确：只操作 class，不干预 style.width function openSideMenu() { if (sidebarOpen) { sidebar.classList.remove("animatedSidebar"); titleBar.classList.remove("shrinkTopBar"); sidebar.style.display = "none"; sidebarOpen = false; } else { sidebar.style.display = "flex"; sidebar.classList.add("animatedSidebar"); titleBar.classList.add("shrinkTopBar"); // ✅ 仅此一行触发动画 sidebarOpen = true; } } -
确保 sidebar 也使用 animation-fill-mode: forwards（虽当前已生效，但建议统一规范）：
.animatedSidebar { animation-name: openingSidebar; animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: forwards; /* 推荐补全 */ }
? 补充优化建议
- 使用 requestAnimationFrame 或 setTimeout(..., 0) 可规避 class 添加与样式计算的竞态（极少数场景下）；
- 若需响应式适配，建议将 vw 单位替换为 rem 或 flex-basis 配合媒体查询；
- 为提升可维护性，可将动画时长、偏移量提取为 CSS 自定义属性：
:root { --sidebar-width: 25%; --animation-duration: 1s; } @keyframes openingSidebarTitle { from { left: 0; width: 100%; } to { left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); } }
通过将标题栏设为绝对定位、放弃对 width 的直接动画、改用 left + width 组合并强制 forwards 填充模式，即可彻底解决动画跳过问题，实现标题栏与侧边栏协同运动的流畅视觉效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
