使用共享布局制作动画时，Framer Motion 文本会变形

Question

我处于 Next.js 环境中，并将我的 _app.js 用 .

在页面内，我设置了一个基本路由，可以从第 1 页跳转到第 2 页。

在每一页上我都有一个看起来像 h1 的运动。所以有两个具有匹配 ID 的组件。

const stats = {
  visible: {
    opacity: 1,
  },
  hidden: {
    opacity: 1,
  },
  exit: {
    opacity: 0,
    y: 50,
  },
}

      <motion.h1
        initial="hidden"
        animate="visible"
        variants={stats}
        layout
        className="text-3xl text-gray-800 font-bold"
        layoutId={`product-title-${data.title}`}
      >
        {data.title}
      </motion.h1>

当我导航页面时，元素从其对应部分的先前位置开始动画。但是动画时文本全部扭曲。

如何修复扭曲的文本？

Answer 1

"position"您可以尝试为布局属性指定 的值，而不是 true 。

layout="position"

如成帧器运动文档中所述

如果布局设置为“position”，则组件的大小将立即改变，并且只有其位置会产生动画。

由于您仅对位置和不透明度进行动画处理，因此它可以解决您的问题。