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

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”只是一个带有 header 的布局，着陆页是唯一不使用此布局的页面。

着陆页和任何其他页面之间的动画效果流畅，因为带有 header 的布局会随着页面内容淡入淡出，但在同时使用该布局的页面之间进行转换是我正在努力解决的问题.

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

如有任何帮助，我们将不胜感激。

Answer 1

假设所有页面的页眉和页脚都相同，您应该将页眉和页脚移出页面组件，并移出 <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 />

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

Transition page content excluding the header and footer

javascript

reactjs

react-router

react-router-dom

framer-motion