避免安装时的成帧器运动初始动画

Question

请参阅此codesandbox。

我有一个基本的成帧器运动动画，其中框的高度在切换时会产生动画效果。但是，我希望默认情况下显示该框，但是当页面加载时会显示初始动画。

我的问题是，如果组件应该在安装上显示，但仍保持未来的进入和退出动画，如何避免组件的初始动画？谢谢！

Answer 1

这个问题有点老了，但以防万一有人偶然发现这个问题。如果您使用的是 AnimatePresence，则可以在组件initial={false}上使用AnimatePresence。就像这样，

<AnimatePresence initial={false}>
  {someCondition ? (
    <motion.h1 {...yourProps}>
      yooo
    </motion.h1>
  ) : null}
</AnimatePresence>

更多信息在这里： https: //www.framer.com/docs/animate-presence/##suppressing-initial-animations

Answer 2

我想出了这样的解决方案；

1-我对组件内部进行了变体

2 - 我为不透明度和高度创建了两种状态

3 - 状态最初与您设置动画的位置相同。所以当你第一次渲染时基本上什么也没有发生。

4 - 使用 useEffect，您可以将这些值与实际的初始值交换，因此在第一次渲染后，动画就会起作用。

export const AnimatedFallback = ({ isVisible }) => {
  const [opacity, setOpacity] = useState(1);
  const [height, setHeight] = useState("200px");

  const variants = {
    initial: {
      opacity: opacity,
      height: height
    },
    enter: {
      opacity: 1,
      height: "200px",
      transition: { duration: 0.5 }
    },
    exit: {
      opacity: 0,
      height: 0,
      transition: { duration: 0.5 }
    }
  };

  useEffect(()=> {
    setHeight(0)
    setOpacity(0)
  }, [])

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          animate="enter"
          className="fallback"
          exit="exit"
          initial="initial"
          variants={variants}
        >
          Suspense Fallback Component
        </motion.div>
      )}
    </AnimatePresence>
  );
};