为什么我的成帧器运动 h1 组件在我的 React 项目中发生偏移？

Question

所以当我在 h1 上使用成帧器运动时遇到问题

import { motion } from "framer-motion";
function FirstPage() {
  return (
    <motion.h1
      initial={{ opacity: 0, scale: 0.5, y: -100, x: -100 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{
        duration: 0.8,
        delay: 0.5,
        ease: [0, 0.71, 0.2, 1.01],
      }}
    >
      Tehauto
    </motion.h1>
  );
}

在 css 中，我将 h1 居中，在动画中，我不更改 x 坐标 但由于某种原因它向右偏移 我不知道这是否重要，但我也安装了引导程序

带有成帧器运动（图片链接）

当我使用常规 h1（图片链接）时

我尝试删除整个标题，然后保存并再次重写，但没有成功

Answer 1

我尽力解决您的所有问题！！

是否安装了bootstrap并不重要（样式也可以很好地覆盖）。

最主要的是，您需要创建 div 并将其包装起来，并在 h1 和 div 中使用内联样式。 像这样你可以做到：

//...
     <div
        style={{
          height: '0px',
          width: '100px',
          top: '200px',
          color: 'white',
          left: '40%',
          position: 'relative',
        }}
      >
        <motion.h1
          initial={{
            left: -30,
            position: 'relative',
            opacity: 0,
            scale: 0.5,
            y: -100,
          }}
          style={{
            fontSize: '80px',
            visibility: 'visible',
          }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{
            duration: 0.8,
            delay: 0.5,
            ease: [0, 0.71, 0.2, 1.01],
          }}
        >
          Tehauto
        </motion.h1>
      </div>
//...

以下是更新示例链接。

你可以乱搞它。

希望这会有所帮助！