如何实现nav/div仅向左侧扩展？请帮忙排查问题

问题根源 #

当前导航栏（nav）的定位与动画方向配置错误，导致它向右侧扩展而非左侧。核心问题在于nav的初始定位位置及动画的宽度变化方向设置不当。

具体修复步骤 #

• 调整nav的定位规则
  将nav固定在页面右侧，初始宽度设为0，这样宽度增加时会自然向左扩展：

  nav {
    position: fixed;
    top: 0;
    right: 0; /* 固定在页面右侧边缘 */
    width: 0;
    height: 100vh;
    background-color: #222;
    overflow: hidden;
    transition: width 0.3s ease-in-out;
  }
  

  当触发展开状态时，给nav设置目标宽度（如width: 300px），此时nav会从右侧向左延伸。

• 修正内部内容对齐方式
  确保nav内的内容在扩展后保持靠左对齐，避免视觉错乱：

  nav ul {
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start; /* 内容靠左对齐 */
  }
  

• 适配Framer Motion动画逻辑
  若使用了Framer Motion的motion组件，需确保动画变体的宽度变化方向与定位匹配：

  const navVariants = {
    open: { width: "300px" },
    closed: { width: 0 }
  };
  

  无需额外设置x轴位移，仅通过宽度变化即可实现向左扩展的效果。

验证效果 #

完成上述调整后，导航栏会始终从页面右侧边缘开始，向左逐步展开，不会向右侧占用额外空间，完全符合需求。

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