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

Question

我在 Next.js 环境中并用 .

包装了我的 _app.js

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

在每个页面上我都有一个 Action 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"

如成帧器运动文档中所述

If layout is set to "position", the size of the component will change instantly and only its position will animate.

由于您只为位置和不透明度设置动画，因此它可以解决您的问题。