中文教程｜ Framer Motion ｜基于React最好的动效库

const list = {
  visible: { opacity: 1 },
  hidden: { opacity: 0 },
}

const item = {
  visible: { opacity: 1, x: 0 },
  hidden: { opacity: 0, x: -100 },
}

return (
  <motion.ul
    initial="hidden"
    animate="visible"
    variants={list}
  >
    <motion.li variants={item} />
    <motion.li variants={item} />
    <motion.li variants={item} />
  </motion.ul>
)

我们没有给子元素设置任何的animate或者其他方式让他启动变化，但是你会发现子元素会自动启动变化，这个就是通过variants属性实现的父子联动的机制，但是这个机制看起来很死板，父元素开始变化，子元素就马上同步变化。

但是其实，在实现父子联动的时候，我们可以在父元素的transition中设置一些属性，来让这个父子联动的变化效果，变得更加可控和可调节。

delayChildren

子元素延迟时长，作用于所有子元素

｜

数字类型

when

决定父级元素是在什么时间点开始执行并完成自己的变化

1 - false 默认值，如果没有设置子元素的延迟，就是同时发生变化

2 - "beforeChildren"

当父元素完成变化之后，子元素才会开始变化

3 - "afterChildren"

当子元素完成变化之后，父元素才会开始变化

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      // 所有子元素启动变化会比元素元慢0.5秒
      delayChildren: 0.5
    }
  }
}

const item = {
  hidden: { opacity: 0 },
  show: { opacity: 1 }
}

return (
  <motion.ul
    variants={container}
    initial="hidden"
    animate="show"
  >
    <motion.li variants={item} />
    <motion.li variants={item} />
  </motion.ul>
)

staggerChildren

子元素依次启动延迟

｜

数字类型

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
    // 每个子元素的延迟时间会逐个递增0.5秒，也就是每个的启动时间都会比前一个有0.5s的延迟
    staggerChildren: 0.5
    }
  }
}

const item = {
  hidden: { opacity: 0 },
  show: { opacity: 1 }
}

return (
  <motion.ol
    variants={container}
    initial="hidden"
    animate="show"
  >
    <motion.li variants={item} />
    <motion.li variants={item} />
  </motion.ol>
)

const list = {
  hidden: {
    opacity: 0,
    transition: { when: "afterChildren" }
  }
}

const item = {
  hidden: {
    opacity: 0,
    transition: { duration: 2 }
  }
}

return (
  <motion.ul variants={list} animate="hidden">
    <motion.li variants={item} />
    <motion.li variants={item} />
  </motion.ul>
)

以上这些就是父子联动的动画效果我们可以设置的几个属性。

三种变化模式

关键帧动画