Warum ist meine Framer-Motion-H1-Komponente in meinem React-Projekt versetzt?

Question

Ich habe also ein Problem bei der Verwendung von Framer-Bewegung auf 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>
  );
}

In CSS zentriere ich h1 und in der Animation ändere ich die X-Koordinate nicht Aber aus irgendeinem Grund ist es nach rechts versetzt Ich weiß nicht, ob das wichtig ist, aber ich habe auch den Bootloader installiert

Mit Framer-Bewegung (Bildlink)

Wenn ich normales h1 verwende (Bildlink)

Ich habe versucht, den gesamten Titel zu löschen, ihn dann zu speichern und erneut zu schreiben, aber ohne Erfolg

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>
//...

以下是更新示例链接。

你可以乱搞它。

希望这会有所帮助！