使用共享布局制作动画时，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"

如成帧器运动文档中所述

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

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

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

Framer Motion text gets distorted when animating with shared layouts

framer-motion