這是網站鏈接，如您所見，介紹影片看起來太滯后了。這是代碼：
<motion.div className='pic' initial={{x:window.innerWidth < 996?'0%':'100%'}} animate={{x:'0%'}} transition={{delay:'1.6', type:'spring'}}><img src={blob} alt='hero section image'></img></motion.div>
即使是英雄部分之后的影片也不好看。我已經使用 react-intersection-observer 在這個特定代碼中激活滾動影片。
<motion.div className='detailed' ref={refdetail} initial={{x:'100%', opacity:'0%'}} animate={{x: inViewdetail? '0%': '100%', opacity:inViewdetail? '100%': '0%'}} transition={{ delay:'1.5'}}>
uj5u.com熱心網友回復：
最近我和我一起作業過，framer.motion而且效果很好。
我認為這個問題與delay你在 prop 中使用的子道具有關transition。
這是我測驗過的代碼庫，motion.framer在我這邊可以正常作業。
<motion.div
key={"setuplayout_motion"}
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
>
<SetupLayout setCurrentStep={setCurrentStep} />
</motion.div>
<motion.div
animate={{
x: authType === "sign-in" ? "10px" : "70px",
}}
transition={{
x: { type: "spring", stiffness: 100 },
duration: 0.8,
delay: 0.2,
}}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/488841.html
上一篇：滾動時縮小div