使用framer-motion的滾動插值justifyContent的技巧
P粉238433862
2023-08-31 18:42:45
<p>我有一段程式碼可以在x值之間進行動畫，但是當嘗試從justify-content: center轉換到left時無法運作。 </p>
<p>以下是程式碼片段：</p>
<pre class="brush:php;toolbar:false;">function Navbar() {
const { scrollY } = useScroll();
const x = useTransform(scrollY, [0, 100], ["center", "left"]);
return (
<motion.div
layout
className={styles.parent}
style={{ justifyContent: x, display: "flex" }}
transition={{
duration: 0.5
}}
>
<Image
src="/BlackLogo-2.svg"
alt="Cg Logo"
width={100}
height={100}
style={{padding: 20,}}
priority
/>
</motion.div>
)
}</pre></p>
我找到了一個解決方案。你只需使用useMotionValueEvent函數來檢查是否滾動超過某一點，並將其設置為狀態，然後必須將你的子元素（我的圖片）包裝在motion.div中，同時在外部div中設置類，如下所示：
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> ) }