reactjs - 当每个项目在视图中滚动时为映射项目设置一次动画

Question

我在使用array.map 为3 div 设置动画时遇到了一些问题。我想让每个 div 使用成帧器运动在视图中动画一次。

我遇到的问题是，当尝试使用 inView 单独为 div 设置动画时，成帧器运动会同时为所有 3 个设置动画。

如果我inView ref={ref}在父 Div 上设置，一旦第一个可见，所有 3 个将一起动画。

或者

如果我设置ref={ref}到 3 个映射的 div，所有 3 个将仅在第 3 个和最后一个 div 出现时动画。

我试图找到一种简洁的方法来单独动画到具有映射数据的视图 Div 中。

代码框链接供参考。

标签： reactjsframer-motioninview

Answer 1

如果您希望它们单独运行，则需要为每个 div 存储单独的状态和控件。最简单的方法是制作单独的组件：

const ProjectDiv = ({ onClick, item }) => {
  const controls = useAnimation();
  const [ref, inView] = useInView();

  useEffect(() => {
    if (inView) {
      controls.start('visible');
    }
  }, [controls, inView]);

  return (
    <motion.div
      ref={ref}
      className="project_card"
      onClick={onClick}
      animate={controls}
      initial="hidden"
      transition={{ duration: 1 }}
      variants={{
        visible: { opacity: 1, scale: 1 },
        hidden: { opacity: 0, scale: 0 }
      }}
    >
      <img src={item.image} alt="Project" />
      <h2>{item.title}</h2>
      <p>{item.description}</p>
    </motion.div>
  );
};

代码沙盒示例