Petua untuk justifyContent menggunakan interpolasi skrol framer-motion
P粉238433862
2023-08-31 18:42:45
<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>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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> ) }