小编Sai*_*jje的帖子

我正在使用成帧器运动来为一页中的多个元素设置动画。由于成帧器运动没有一种简单的方法可以在元素进入视口后对其进行动画处理，因此我使用此方法：

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 …