React导航栏菜单点击后向左多滑动200px的原因咨询

问题根源 #

你的菜单容器初始定位和动画逻辑不匹配，导致滑动距离超出预期：

• 容器样式设置了position: absolute; right: 0; width: 200px，这意味着初始状态下容器已经完全显示在屏幕右侧（右边缘对齐屏幕右边界，向左延伸200px）。
• 动画slide-left的最终状态是transform: translateX(-200px)，这会让容器从初始位置向左移动200px——相当于整个容器完全滑出屏幕左侧，滑动距离自然比预期多了200px。

修复方案 #

根据你“点击按钮菜单向左滑动（滑入屏幕）”的需求，需要调整初始定位和动画方向：

1. 修改容器初始位置（默认隐藏在屏幕右侧外） #

.navbar__menu-container {
    height: 100%;
    width: 200px;
    position: absolute;
    right: -200px; /* 初始状态在屏幕右侧外 */
    z-index: 1;
    top: 0;
    background-color: #fff;
    overflow-x: hidden;
    padding-top: 60px;
}

2. 调整动画逻辑（让容器从右侧滑入屏幕） #

.slide-left {
  -webkit-animation: slide-in-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200px); /* 向左移动200px，刚好让容器右边缘对齐屏幕右边界 */
    transform: translateX(-200px);
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
  }
}

3. 可选：优化关闭动画 #

如果需要关闭菜单时滑回右侧隐藏，可以添加反向动画：

.slide-right {
  -webkit-animation: slide-out-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-out-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-out-right {
  0% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slide-out-right {
  0% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

然后在React组件中切换类名：

{toggleMenu ? (
  <div className="navbar__menu-container slide-left">
    <button className="navbar__menu-container_close">
      <FiX color="#000" size={27} onClick={() => setToggleMenu(false)} />
    </button>
    <div className="navbar__menu-container_links">
      <Menu />
    </div>
    <button className="navbar__menu-container_btn">Get in Touch</button>
  </div>
) : null}

内容的提问来源于stack exchange，提问作者Artcchi