不包括页眉和页脚的过渡页面内容

Question

我一直在尝试使用 framer motion 和 react router 在我的网站上的页面之间添加一些不错的过渡。

这是我的代码：

        <AnimatePresence initial={false} exitBeforeEnter>
            <Switch location={location} key={location.pathname}>
                
                <Route path="/" exact>
                    <LandingPage />
                </Route>

                <PrimaryLayout>     
                    <Route path="/home">
                        <HomePage />
                    </Route>

                    <Route path="/about" >
                        <AboutUs />
                    </Route>

                    <Route path="/test" >
                        <TestPage />
                    </Route>
                </PrimaryLayout>

            </Switch>
        </AnimatePresence>

“PrimaryLayout”只是一个带有标题的布局，着陆页是唯一不使用此布局的页面。

登录页面和任何其他页面之间的动画运行顺畅，因为带有标题的布局随着页面内容淡入，但在都使用该布局的页面之间转换是我正在努力解决的问题。

每当我在这些页面之间切换时，带有标题的布局都会动画出来，然后再返回，看起来很奇怪。

对此的任何帮助将不胜感激。

Answer 1

假设您的页眉和页脚对于所有页面都是相同的，您应该将页眉和页脚移出您的 Page 组件，并移出 <AnimatePresence> 组件。

<Header />
         <AnimatePresence initial={false} exitBeforeEnter>
            <Switch location={location} key={location.pathname}>
                {/* Only the main content gets animated. No headers / footers in here. */}
            </Switch>
        </AnimatePresence>
<Footer />