Mengapa komponen h1 gerakan pembingkai saya diimbangi dalam projek React saya?

Question

Jadi saya ada masalah bila guna framer motion pada 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>
  );
}

Dalam css saya memusatkan h1 dan dalam animasi saya tidak menukar x koordinat Tetapi atas sebab tertentu ia diimbangi ke kanan Saya tidak tahu sama ada ini penting tetapi saya juga memasang pemuat but

Dengan gerakan pembingkai (pautan gambar)

Bila saya guna h1 biasa (pautan gambar)

Saya cuba memadamkan keseluruhan tajuk, kemudian menyimpan dan menulisnya semula, tetapi tidak berjaya

Answer 1

Saya cuba yang terbaik untuk menyelesaikan semua masalah anda! !

Tidak kira sama ada bootstrap dipasang atau tidak (gaya boleh diganti dengan baik juga).

Perkara utama ialah anda perlu mencipta div 并将其包装起来，并在 h1 和 div menggunakan gaya sebaris. Seperti ini anda boleh melakukannya:

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

Berikut ialah pautan contoh yang dikemas kini.

Anda boleh mengacaukannya.

Semoga ini membantu!