小编man*_*ngo的帖子

我在几页上输入了我的动画。您必须单击该按钮才能获得下一页和下一轮输入，但是当您到达每个页面的末尾时，您可以点击 Tab 按钮，它会专注于下一个输入字段，这会导致动画流和展示。我可以禁用选项卡按钮吗？

我处于 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>

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

如何修复扭曲的文本？