如何使用 framer-motion 和 reactjs 将 children 与 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>

但是 children 不会同时交错和动画。如何使用 svg 线条实现惊人的 children？

可以找到示例代码here

Answer 1

结果

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

不应有任何首字母或动画，应仅依赖变体。

如何使用 framer-motion 和 reactjs 将 children 与 svg 行错开？

How to use framer-motion and reactjs to stagger children with svg lines?

reactjs

framer-motion