React + Framer Motion 淡出功能组件答案

【问题标题】：React + Framer Motion fading out functional componentReact + Framer Motion 淡出功能组件
【发布时间】：2021-04-03 18:29:15
【问题描述】：

所以我创建了这个预加载器，它显示 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，但这似乎不起作用。（顺便说一句，我也在使用样式组件）

【问题讨论】：

标签： javascript reactjs framer-motion

【解决方案1】：

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

实现此功能的提示

AnimatePresense 必须在您有条件渲染的范围之外
您必须在 AnimatePresense 的子级上具有显式键，因为这是 React 知道组件是否已更改的方式。

我知道这很无聊，但我可能会重读几次 AnimatePresense 文档。在弄清楚所有问题之前，我必须亲自阅读 2 或 3 遍

干杯

【讨论】：