如何使用framer-motion和reactjs来错开svg线条的孩子？

Question

我有一段带有2个变体的代码来帮助动画：

const xo = {
  hidden: {
    opacity: 0,
    pathLength: 0,
    fill: "#fff134"
  },
  visible: {
    opacity: 1,
    pathLength: 1,
    fill: "#563930",
    transition: { duration: 2 }
  }
};

const stagger = {
  hidden: {
    opacity: 0
  },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.05 }
  }
};

它在代码中反映为：

<motion.div
      className="App"
      variants={stagger}
      initial="hidden"
      animate="visible"
    >
      <motion.svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 100 100"
        className="v1"
      >
        <motion.path
          d="M 100 0 L 100 280 Z"
          variants={xo}
          initial="hidden"
          animate="visible"
          transition={{
            default: { duration: 2, ease: "easeInOut" },
            fill: { duration: 2, ease: [1, 0, 0.8, 1] }
          }}
        />
      </motion.svg>

然而，孩子们并不是一下子就摇摇晃晃地动起来的。如何用svg线条实现让孩子们错开？

示例代码可以在here中找到

Answer 1

事实证明

<motion.path
          d="M 100 0 L 100 280 Z"
          variants={xo}

不应该有任何初始的或动画的，应该只依赖变量。