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 遍

干杯