使用Framer Motion的staggerChildren技术

Question

我在使用Framer Motions的"staggerChildren"动画过渡效果时遇到了一些问题，它可以让子组件的动画错开。

我已经为父容器和子元素设置了如下的动画属性：

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

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

然后我获取一个项目数组并将其保存到我的用户状态中。最后，只需使用简单的映射从该数组中呈现一些数据。

Translated text:

然后我获取一个项目数组并将其保存到我的用户状态中。最后，只需使用简单的映射从该数组中呈现一些数据。

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

Answer 1

我知道这个问题已经有答案了，但仍然回答一下，以便那些后来者可能会看到。所以，这就是你需要做的。

这是因为你不想在有内容之前就开始阶段性加载，否则阶段性加载会在内容到达之前运行并且你将看不到它发生。

  <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

Answer 2

通过在useState中删除空数组解决了K的问题。

- qua1ity

---

@skiqh，这种错位只会在第一次渲染时发生。因此，在列表有内容之前，您甚至不应该渲染它。 - Víctor Navarro

Answer 3

嘿，大家只需要将staggerChildren应用于父标签即可。

const Box3 = () => {
    const boxVariant = {
        hidden: {
            x: "-100vw", //move out of the site
        },
        visible: {
            x: 0, // bring it back to nrmal
            transition: {
                delay: 0.5,
                when: "beforeChildren", //use this instead of delay
                staggerChildren: 0.2, //apply stagger on the parent tag
            },
        },
    };

    const listVariant = {
        hidden: {
            x: -10, //move out of the site
            opacity: 0,
        },
        visible: {
            x: 0, // bring it back to nrmal
            opacity: 1,
        },
    };

    return (
        <div className="box__container">
            <motion.div
                className="box"
                variants={boxVariant}
                animate="visible"
                initial="hidden"
            >
                {[1, 2, 3].map((box) => {
                    {
                         /* the children is also going to have the same animation as the parent */
                    }
                    return (
                        <motion.li
                            className="mini__box"
                            variants={listVariant}
                        ></motion.li>
                    );
                })}
            </motion.div>
        </div>
    );
};

- Eniola Ademola