获取Gatsby Link目的地，并有条件地使用Framer Motion渲染退出动画

Question

我已经建立了一个小网站，以了解更多关于盖茨比和帧者运动和样式组件的页面过渡。

[SPOILER]:我要解决的问题是在代码块的末尾

当前的工作方式很简单:

首页项目列表

export default function Home() {
return (
<Layout>
<Welcome />
<WorkList />
<Footer />
</Layout>
)
}

一个项目页面模板createPages(这里是一个简化的版本)

import React, { useState, useRef, useContext, useEffect } from "react"
import { Link } from "gatsby"
// Components
...
// Data
import Projects from "../data/works.json"
// Styles
...
// Variants
...
const Project = ({ pageContext }) => {
const project = Projects.find(({ id }) => id === pageContext.id)

// lots of functions here
return (
<Layout>
<ProjectWrapper>
<Container>
<ProjectContent>
<BackgroundLines />
<ProjectContentInner>
<ProjectHeader>
<!-- here the header logic -->
</ProjectHeader>
<ProjectBlocks>
<!-- here the content logic -->
</ProjectBlocks>
</ProjectContentInner>
<ProjectFooter>
<!-- here the footer logic -->
</ProjectFooter>
</ProjectContent>
</Container>
</ProjectWrapper>
</Layout>
)
}
export default Project

Layout组件按住导航

// Components
import Header from "./header"
// Styles
import { GlobalStyle } from "../styles/globalStyles"
const Layout = ({ children }) => {
return (
<div className="app">
<GlobalStyle />
<Header />
<main>{children}</main>
</div>
)
}
export default Layout

最后但并非最不重要的是，gatsby.browser.js包裹着AnimatePresence和Context Provider

import React from "react"
import { AnimatePresence } from "framer-motion"
import { LocationProvider } from "./src/context/locationContext"
export const wrapPageElement = ({ element }) => (
<LocationProvider>
<AnimatePresence exitBeforeEnter>{element}</AnimatePresence>
</LocationProvider>
)
export const shouldUpdateScroll = () => {
return false
}

所以我想做的事情似乎很容易，但事实证明并非如此(至少对我来说)。我最近在两个项目之间做了一个漂亮的过渡，类似于你在这里看到的。

如果你滚动到页面底部，你可以看到下一个项目的标题显示为预览，一旦你点击它，它将顺利过渡到下一个项目页面。

太棒了。

但是，当用户点击导航中的链接，将他带到主页或另一个页面时，这种转换就会出现问题。

我不想有相同的退出转换，其中一些元素消失而其他元素重叠，我不想要相同的时间。我想做一些完全不同的事情，基于我要去的地方。

我认为作为一个解决方案，是有条件地渲染exit transition帧运动，有不同的退出动画基于一些变量。

我希望能够在组件卸载之前跟踪Link Destination，以便能够在Framer Motion中有条件地呈现退出转换

既然，正如你可能已经看到的，导航不在project.js内，我尝试了createContext和useContext，让location.pathname具有origin状态和e.target.pathname在Link上具有destination状态。这实际上不起作用，因为所有东西似乎都得到了渲染。

我只是提供了一些似乎对理解整体结构至关重要的代码片段，但我可以更深入地了解我构建variants或当前exit动画的方式。

Answer 1

我不确定它是否会有所帮助，但您可以将props作为wrapPageElement中的任何React组件:

export const wrapPageElement = ({ element, props }) => {
console.log("props", props)
if(props.location.pathname==='/'){
//return some other animation stuff
}
return <LocationProvider {...props}>
<AnimatePresence exitBeforeEnter>{element}</AnimatePresence>
</LocationProvider>
}