為什麼我的成幀器運動 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>
//...

以下是更新範例連結。

你可以亂搞它。

希望這會有所幫助！