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

【问题标题】：Animate mapped items once when each is scrolled in view当每个项目在视图中滚动时为映射项目设置一次动画
【发布时间】：2021-10-03 05:02:33
【问题描述】：

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

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

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

或

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

我正在尝试找到一种简洁的方法，将动画单独放入已映射数据的视图 Div。

codesandbox Link 供参考。

【问题讨论】：

标签： reactjs framer-motion inview

【解决方案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

【讨论】：

啊，太好了，谢谢！