staggerChildren with framer 运动

Question

我在让成帧器动作“staggerChildren”过渡处理简单的项目列表时遇到了一些问题。它基本上允许子组件的动画交错。

我为父容器和子容器设置了这样的动画属性：

 const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.5
    }
  }
};

const listItem = {
  hidden: { opacity: 0 },
  show: { opacity: 1 }
};

然后我获取一组项目并将其保存到我的用户状态。最后只是一个简单的地图来渲染该数组中的一些数据。

 export const Example = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get("https://reqres.in/api/users").then(res => {
      setUsers(res.data.data);
    });
  }, []);

  return (
    <motion.ul variants={container} initial="hidden" animate="show">
      {users.map((item, i) => (
        <motion.li key={i} variants={listItem}>
          {item.first_name}
        </motion.li>
      ))}
    </motion.ul>
  );
};

问题是这些项目在渲染时不会交错并最终同时淡入淡出。我不确定为什么。这个例子： https ://codesandbox.io/s/wispy-shape-9bfbr?file=/src/Example.js

如果我改为使用存储在变量中的静态项目数组，然后只使用完全相同的循环，我就可以使转换工作。像这个工作示例： https ://codesandbox.io/s/late-http-vz1s6?file=/src/Example.js

但是我需要这个来处理我在 useEffect Hook 中获取的数组。任何人都知道如何？

原文由 qua1ity 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

K，通过删除 useState.. 中的空数组来解决

原文由 qua1ity 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我知道这已经得到回答，但仍然为那些以后可能会阅读它的人回答。所以，这就是你需要做的。

这是因为在您拥有内容之前您不想交错，否则交错将在内容到达之前运行并且您不会看到它发生。

   <React.Fragment>
    {users &&
        <motion.ul variants={container} initial="hidden" animate="show">
          {users.map((item, i) => (
            <motion.li key={i} variants={listItem}>
              {item.first_name}
            </motion.li>
          ))}
        </motion.ul>
     }
  </React.Fragment>

原文由 Newbie 发布，翻译遵循 CC BY-SA 4.0 许可协议