css 动画被跳过，通常是因为浏览器在添加动画类后未触发重排（reflow）就立即执行了样式变更；通过 animation-fill-mode: forwards 保留终态，并将元素设为 position: absolute 避免布局干扰，可确保动画正常播放。
css 动画被跳过，通常是因为浏览器在添加动画类后未触发重排（reflow）就立即执行了样式变更；通过 animation-fill-mode: forwards 保留终态，并将元素设为 position: absolute 避免布局干扰，可确保动画正常播放。
在使用 JavaScript 动态控制 CSS 动画时（如侧边栏展开时同步收缩顶部标题栏），常见陷阱是：动画类添加后立即修改内联样式（如 titleBar.style.width = "75vw"），导致浏览器跳过动画帧，直接应用终值。这是因为浏览器将类添加与内联样式变更视为同一次渲染流程，从而“优化”掉过渡过程。
✅ 正确做法：分离动画逻辑与样式控制
移除所有内联 width/transform 控制
不应在 JS 中手动设置 titleBar.style.width 或 sidebar.style.transform——这些应完全由 CSS 动画接管。为动画元素启用 animation-fill-mode: forwards
确保动画结束后保持 to 关键帧的状态，避免回退到初始值：
.shrinkTopBar {
position: absolute; /* 关键：脱离文档流，避免影响 sidebar 布局 */
left: 0;
width: 100vw;
animation-name: openingSidebarTitle;
animation-duration: 1s;
animation-timing-function: linear;
animation-fill-mode: forwards; /* 必须添加！否则动画结束即恢复原宽 */
}
-
重写动画关键帧，使用 left + width 替代纯 width 变更
单独修改 width 在 flex 容器中易受布局计算干扰；改为同时控制 left 和 width，配合 position: absolute 实现精准位移：
@keyframes openingSidebarTitle {
from {
left: 0;
width: 100vw;
}
to {
left: 25vw; /* 向右偏移 25vw，等效于“被 sidebar 推开” */
width: 75vw;
}
}
-
确保父容器支持绝对定位
给 添加 position: relative，使 #topDiv 的 position: absolute 相对于视口定位：
body {
position: relative;
display: flex;
margin: 0;
padding: 0;
}
-
精简 JavaScript：只操作 class，不触碰 style
删除所有 titleBar.style.width 和 sidebar.style.transform 手动赋值，让 CSS 全权负责动画：
function openSideMenu() {
const isClosing = sidebarOpen;
if (isClosing) {
console.log("Close sidebar command.");
sidebar.classList.remove("animatedSidebar");
titleBar.classList.remove("shrinkTopBar");
sidebar.style.display = "none";
sidebarOpen = false;
} else {
console.log("Open sidebar command.");
sidebar.style.display = "flex";
sidebar.classList.add("animatedSidebar");
titleBar.classList.add("shrinkTopBar");
sidebarOpen = true;
}
sidebarClickedCounter++;
}
⚠️ 注意事项
- 不要混合控制方式：一旦使用 CSS 动画，就避免用 JS 直接修改参与动画的属性（如 width, transform, left）；
- display: none 会中断动画：关闭时先移除动画类，再设 display: none；开启时先设 display: flex，再加动画类；
- forwards 不是默认行为：若遗漏 animation-fill-mode: forwards，动画结束后元素将恢复 from 状态，造成“闪回”；
- 响应式兼容性：vw 单位在移动端表现稳定，但需测试 iOS Safari 对 translateX(-100%) 的支持（建议补充 -webkit-transform 前缀）。
通过以上调整，标题栏将平滑从 100vw 缩至 75vw 并向右偏移 25vw，与侧边栏动画严格同步，彻底消除空白间隙与动画跳过问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
