Framer Motion使用AnimateSharedLayout布局动画时子元素字体失真修复

问题根因 #

你遇到的字体失真本质是Framer Motion做共享布局过渡时，默认通过transform缩放容器实现尺寸变化，子元素的布局校正逻辑没有正确生效导致的拉伸，按以下步骤修改即可解决：

修复步骤 #

1. 移除文字元素layout属性的注释，正确启用布局校正
   你现有代码中h1、p标签的layout属性被//注释，实际没有生效。给所有带layoutId的文字元素主动添加layout属性：

// ProjectTemplate 内的文字元素修改示例
<motion.h1
  layoutId={`Title${props.projectobj.title}`}
  layout // 去掉注释，主动添加
  transition={{ duration: 2 }}
  className="text-2xl"
>
  {props.projectobj.title}
</motion.h1>

ProjectTemplateExpanded内的对应h1、p元素做相同修改。

2. 分离布局过渡和普通样式过渡，避免逻辑冲突
   你当前将transition全局配置在motion组件上，会同时作用于布局动画和普通样式动画，容易引发校正逻辑冲突。将布局相关过渡单独用layoutTransition配置，普通样式（比如borderRadius）的过渡单独声明：

// 卡片容器修改示例
<motion.div
  initial={{ borderRadius: "100px" }}
  animate={{ borderRadius: "50px" }}
  // 仅给borderRadius配置过渡
  transition={{ borderRadius: { duration: 2 } }}
  layoutId={`Container${props.projectobj.title}`}
  // 单独给布局动画配置过渡
  layoutTransition={{ duration: 2 }}
  className="w-full h-56 flex flex-col justify-center"
  style={{ background: props.projectobj.background }}
  onClick={() => props.setexpanded(props.index)}
>

两个组件的卡片容器都做相同修改。

3. 可选：优化布局上下文校正
   如果修改后仍有轻微失真，可给外层AnimateSharedLayout添加shared={true}强制全局共享布局上下文，同时给文字元素添加will-change提示浏览器提前优化渲染：

// App组件修改
<AnimateSharedLayout type="crossfade" shared={true}>
  <Projects />
</AnimateSharedLayout>

// 文字元素添加样式
<motion.h1
  // 其他属性不变
  style={{ willChange: "transform" }}
>

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