Framer Motion固定元素单轴布局动画异常问题求助

针对固定底部导航下划线在页面滚动时Y轴偏移的问题，可通过以下方案解决：

核心解决方案：限制布局动画仅作用于X轴 #

Framer Motion提供layoutAxis属性，能直接指定布局动画仅在单轴生效。修改Underline组件，添加该属性即可：

const Underline = ({ className = "", id = "underline", ...props }) => {
    return (
        <m.div
            {...props}
            layout="position"
            layoutId={id}
            layoutAxis="x" // 强制布局动画仅在X轴执行
            className={`h-0.5 bg-green-light absolute bottom-2 inset-x-4 transition-colors ${className}`}
        />
    );
};

补充调整建议 #

1. 移除不必要的layoutRoot：
   固定定位元素本身脱离文档流，m.ul上的layoutRoot可能干扰布局动画计算逻辑，建议移除：

   // 原代码：<m.ul layoutRoot className="flex text-xl h-navbar">
   // 修改后：
   <m.ul className="flex text-xl h-navbar">
   

2. 确保下划线Y轴位置绝对固定：
   下划线使用绝对定位，需保证其相对于父元素（li）的Y轴位置为固定值（如你设置的top-0或bottom-2），避免使用随滚动变化的相对值。

原理说明 #

页面滚动时，Framer Motion默认会监听元素所有轴的位置变化，误将页面滚动偏移量判定为固定元素自身的Y轴位置变化，进而触发不必要的Y轴动画。通过layoutAxis="x"可强制框架仅处理X轴的布局坐标变化，彻底屏蔽Y轴的动画触发。

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