当每个在视图中滚动时动画映射项目一次

Question

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

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

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

或

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

我正在尝试找到一种简洁的方法来在 div 中以动画方式显示已映射数据的 Div。

codesandbox Link 供参考。

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>
  );
};

Codesandbox example

当每个在视图中滚动时动画映射项目一次

Animate mapped items once when each is scrolled in view

inview

reactjs

framer-motion