javascript - 当元素在视图中时 Framer 运动动画（当您滚动到元素时）

Question

当元素在视图中时（例如，当我们滚动到元素时），是否有任何内置方法可以使动画开始？

Framer Motion有安装动画部分，其中说：

当组件挂载时，如果它们与 style 或 initial 中定义的值不同，它将自动动画到 animate 中的值

所以我真的找不到一个直接的方法来让动画在它出现时开始。

但是，我现在看到的唯一选项是使用动画控件，这意味着我必须手动在滚动上实现一个侦听器并触发control.start()，非常感谢任何更简单的方法。

Answer 1

framer-motion自 5.3 版以来，已内置支持此用例。

这是一个演示该模式的 CodeSandbox：https ://codesandbox.io/s/framer-motion-animate-in-view-5-3-94j13

相关代码：

function FadeInWhenVisible({ children }) {
  return (
    <motion.div
      initial="hidden"
      whileInView="visible"
      viewport={{ once: true }}
      transition={{ duration: 0.3 }}
      variants={{
        visible: { opacity: 1, scale: 1 },
        hidden: { opacity: 0, scale: 0 }
      }}
    >
      {children}
    </motion.div>
  );
}

用法：

<FadeInWhenVisible>
  <Box />
</FadeInWhenVisible>

之前的版本：

您当前可以使用命令式动画控件来实现此效果。交叉点观察器可用于检测元素当前是否可见。

这是一个演示该模式的 CodeSandbox：https ://codesandbox.io/s/framer-motion-animate-in-view-gqcc8 。

相关代码：

function FadeInWhenVisible({ children }) {
  const controls = useAnimation();
  const [ref, inView] = useInView();

  useEffect(() => {
    if (inView) {
      controls.start("visible");
    }
  }, [controls, inView]);

  return (
    <motion.div
      ref={ref}
      animate={controls}
      initial="hidden"
      transition={{ duration: 0.3 }}
      variants={{
        visible: { opacity: 1, scale: 1 },
        hidden: { opacity: 0, scale: 0 }
      }}
    >
      {children}
    </motion.div>
  );
}