React + Framer Motion 淡出功能组件

Question

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

包含所有内容的主页。

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

加载 function 文件

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

导出默认加载；

那么我怎样才能使 Loading function 淡出呢？ 我尝试了很多东西，例如围绕加载器本身包裹的 AnimatePresence，但这似乎不起作用。 （顺便说一句，我也在使用样式组件）

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 遍

干杯