Petua untuk justifyContent menggunakan interpolasi skrol framer-motion
P粉238433862
P粉238433862 2023-08-31 18:42:45
0
1
443
<p>Saya mempunyai sekeping kod yang menghidupkan antara nilai x, tetapi ia tidak berfungsi apabila cuba beralih daripada justify-content: center to left. </p> <p>Berikut ialah coretan kod: </p> <pre class="brush:php;toolbar:false;">function Navbar() { const { scrollY } = useScroll(); const x = useTransform(scrollY, [0, 100], ["tengah", "kiri"]); kembali ( <motion.div susun atur className={styles.parent} style={{ justifyContent: x, paparan: "flex" peralihan={{ tempoh: 0.5 }} > <Imej src="/BlackLogo-2.svg" alt="Logo Cg" lebar={100} ketinggian={100} gaya={{padding: 20,}} keutamaan /> </motion.div> ) }</pre></p>
P粉238433862
P粉238433862

membalas semua(1)
P粉293341969

Saya jumpa penyelesaian. Anda hanya menggunakan fungsi useMotionValueEvent untuk menyemak sama ada skrol melepasi titik tertentu dan menetapkannya sebagai keadaan, kemudian anda perlu membungkus elemen anak anda (imej saya) dalam motion.div dan juga menetapkan kelas dalam div luar seperti di bawah Paparan :

function Navbar() {
  const { scrollY } = useScroll();
  const [Scrolled, setScrolled] = useState(false);
  
  useMotionValueEvent(scrollY, "change", (latest) => {
    if (latest > 200) {
      setScrolled(true);
    }
    else {
      setScrolled(false);
    }
  })

  return (
    <div 
      style={{justifyContent: Scrolled? "left" : "center"}}
      className={styles.icon}
    > 
      <motion.div
      layout
      transition={{type: "spring", stiffness: 700, damping: 30}}
      >
        <Image
          src="/BlackLogo-2.svg"
          alt="Cg Logo"
          width={100}
          height={100}
          style={{padding: 20,}}
          priority
        />
      </motion.div>
    </div>
  )

}
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan