reactjs - 如何使用 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 线条实现惊人的孩子？

示例代码可以在这里找到

Answer 1

原来

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

不应有任何初始或动画，应仅依赖变体。