我正在使用 framer-motion 为一页中的多个元素设置动画。由于 framer-motion 没有一种简单的方法来为元素在视口中设置动画,因此我使用了这种方法:
const controls = useAnimation();
const { ref, inView } = useInView();
useEffect(() => {
if (inView) {
controls.start("visible");
}
if (!inView) {
controls.start("hidden");
}
}, [controls, inView]);
const fadeFromBottom = {
hidden: {
opacity: 0,
y: -5,
},
visible: {
opacity: 1,
y: 0,
transition: {
type: "spring",
delay: 0.4,
},
},
};
return (
<motion.section
ref={ref}
variants={fadeFromBottom}
initial='hidden'
animate={controls}
>
<img src={image} alt='image'>
</motion.section>
但是,这种方法只允许我为每个 .jsx 文件的一个元素设置动画。如果我想在两个部分进入视口时使用不同的动画制作动画,我该怎么做?例如,我将如何使用不同的动画在不同时间为这两个部分设置动画?
<motion.section
ref={ref}
variants={fadeFromBottom}
initial='hidden'
animate={controls}
>
<img src={image} alt='image'>
</motion.section>
<motion.section
ref={ref}
variants={fadeFromLeft}
initial='hidden'
animate={controls}
>
<img src={image} alt='image'>
</motion.section>