React + Framer Motion淡出功能组件

Question

所以我创建了这个预加载器，它显示var loading = true的时候，但我希望加载器淡出！这就是我的文件的样子。

首页上有所有的东西。

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

加载函数文件

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

导出默认加载；

那么，如何才能使加载函数淡出呢？我尝试了很多方法，比如用AnimatePresence包装加载器本身，但似乎不起作用。(我也在使用样式组件btw)

Answer 1

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

使其正常工作的提示

1. AnimatePresense必须在您要有条件地呈现的内容之外
2. 您必须在AnimatePresense的子级上具有显式的键，因为这是React知道组件是否已更改的方式。

我知道这很无聊，但我可能会重读几次AnimatePresense文档。我亲自读了2到3遍才弄明白所有的问题。

干杯