使用共享布局设置动画时，"帧器运动"文本会失真

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"

如成帧器动作文件中所述

如果布局设置为"；位置"；，组件的大小将立即更改，并且只有其位置将设置动画。

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