问避免挂载时的帧运动初始动画

EN

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>
  );
};