React + Framer Motion 淡出功能组件

Question

So I created this preloader that shows when the var loading = true but I want the loader to fade out. This is what my files look like.

Home page with all the stuff.

       return (
        <>
            {loading ? (
              <Loading />
            ) : (
              <>
                <Navbar />
                <Hero />
                <About />
                <Skills />
                <Contact />
              </>
            )}
        </>
      );

Loading function file

const Loading = () => {
  const pathVariants = {
    hidden: {
      opacity: 0,
      pathLength: 0,
    },
    visible: {
      opacity: 1,
      pathLength: 1,
      transition: {
        duration: 2,
        ease: 'easeInOut',
      },
    },
  };
  const cVariants = {
    hidden: {
      opacity: 0,
    },
    visible: {
      opacity: 1,
      transition: {
        duration: 1,
        ease: 'easeInOut',
        delay: 2,
      },
    },
  };

  return (
    <>
      <AnimatePresence>
        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
          <PreLoader>
            <Header>
              <motion.svg
                width='286'
                height='209'
                viewBox='0 0 286 209'
                fill='none'
                xmlns='http://www.w3.org/2000/svg'
              >
                <motion.g variants={cVariants} initial='hidden' animate='visible'>
                  <path
                    id='C'
                    d="svglol"
                    fill='#FF564A'
                  />
                </motion.g>

                <motion.g>
                  <motion.path
                    id='Polygon 1'
                    d="svglol"
                    stroke='#FF564A'
                    variants={pathVariants}
                    initial='hidden'
                    animate='visible'
                  />
                </motion.g>
              </motion.svg>
            </Header>
          </PreLoader>
        </motion.div>
      </AnimatePresence>
    </>
  );
};

export default Loading;

So how can I make it so that the Loading function fades out? I tried many things such as AnimatePresence wrapped around the Loader itself but that doesn't seem to work. (I am also using styled-components btw)

Answer 1

    return (
        <AnimatePresense>
            {loading ? (
              <Loading key="loading" />
            ) : (
              <React.Fragment key="main">
                <Navbar />
                <Hero />
                <About />
                <Skills />
                <Contact />
              </ React.Fragment>
            )}
        </AnimatePresense>
      );

Tips to get this working

1. AnimatePresense must be outside of what you are conditionally rendering
2. You must have explicit keys on children of AnimatePresense because this is how React knows if the component has changed or not.

I know it is boring, but I might reread the AnimatePresense doc a couple of times. I had to read it 2 or 3 times personally before I figured out all the gotchas

Cheers