导航栏菜单滑入时偏移超出预期，根本原因是初始定位未将元素完全隐藏在视口外，导致 translateX(-200px) 动画叠加在已可见位置上，造成“多滑 200px”的视觉错觉。
导航栏菜单滑入时偏移超出预期，根本原因是初始定位未将元素完全隐藏在视口外，导致 `translatex(-200px)` 动画叠加在已可见位置上，造成“多滑 200px”的视觉错觉。
在 React 中实现侧滑菜单（如右上角汉堡菜单展开右侧抽屉）时，一个常见误区是：仅依赖 CSS 动画的 transform 做位移，却忽略了元素自身的初始定位状态。你当前的 .navbar__menu-container 设置为 right: 0，意味着它默认就紧贴视口右边缘——此时再执行 translateX(-200px)，动画会从「右边缘」向左再移 200px，结果就是菜单整体向左“突兀闪出”，而非从屏幕外平滑滑入。
✅ 正确思路有两个等效方案，推荐使用方案一（更直观、更易维护）：
✅ 方案一：初始隐藏 + 向右滑入（推荐）
将菜单初始定位设为完全脱离视口右侧，再通过 translateX(0) 动画将其拉回：
.navbar__menu-container {
height: 100%;
width: 200px;
position: absolute;
top: 0;
right: -200px; /* 关键：初始完全隐藏在屏幕右侧外 */
z-index: 1000;
background-color: #fff;
overflow-x: hidden;
padding-top: 60px;
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}
.slide-in {
animation: slide-in 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes slide-in {
from {
transform: translateX(200px); /* 从右侧 200px 处开始 */
}
to {
transform: translateX(0); /* 滑入到 right: 0 的最终位置 */
}
}React 组件中配合使用：
<div className={`navbar__menu-container ${toggleMenu ? 'slide-in' : ''}`}>
<button className="navbar__menu-container_close" onClick={() => setToggleMenu(false)}>
<FiX color="#000" size={27} />
</button>
<div className="navbar__menu-container_links">
<Menu />
</div>
<button className="navbar__menu-container_btn">Get in Touch</button>
</div>? 注意：.slide-in 类需动态添加/移除（而非始终存在），否则每次渲染都会触发动画。建议用 useEffect 或 CSS forwards 保留在场状态，避免重复触发。
⚠️ 方案二（不推荐）：修正原逻辑（需同步调整定位与动画）
若坚持沿用原 slide-left 类名和 -200px 动画方向，则必须确保初始状态为 right: 0，且动画起点为 translateX(0)、终点为 translateX(-200px) ——但此时菜单仍会从屏幕内向左“缩进”，不符合“滑入”交互直觉，且需额外处理 overflow: hidden 防止页面横向滚动：
body {
overflow-x: hidden; /* 防止滑入时出现水平滚动条 */
}
.navbar__menu-container {
right: 0; /* 初始就在右边界 */
}
.slide-left {
animation: slide-left 0.3s cubic-bezier(...) forwards;
}
@keyframes slide-left {
from { transform: translateX(0); }
to { transform: translateX(-200px); } /* 向左收起 → 实际是“关闭”动效 */
}⚠️ 此方式更适合「收起」动作，而非「展开」；用于展开会导致菜单从可见态突然左移，体验割裂。
✅ 最佳实践总结
- 初始定位决定动画基准：transform 是相对自身当前位置的偏移，不是绝对坐标。务必让初始 position 把元素藏在视口外（如 right: -200px 或 left: 100vw）。
- 动画命名语义化：用 slide-in / slide-out 替代 slide-left，避免方向歧义。
- 添加 forwards：确保动画结束后样式保留（如 transform: translateX(0)），防止闪回。
- 层级与遮罩：设置足够高的 z-index（如 1000），必要时配合半透明背景遮罩层提升用户体验。
- 可访问性补充：菜单展开时应聚焦首个可交互元素，并管理 aria-expanded 属性。
正确配置后，菜单将自然地从屏幕右侧滑入，精准停靠于 right: 0，再无“多滑 200px”的异常位移。
