如何使用Gsap在gartsby中添加页面间动画

Question

我想使用Gsap在盖茨比的页面之间添加动画。

我试图遵循他们的文档:https://www.gatsbyjs.com/docs/how-to/adding-common-features/adding-page-transitions-with-plugin-transition-link/

在某处他们说:最后，导入TransitionLink组件，无论你想在哪里使用它…https://www.gatsbyjs.com/docs/how-to/adding-common-features/adding-page-transitions-with-plugin-transition-link/开始

但我不知道在哪里使用，它应该在实际的页面组件或在布局组件中使用?(我想有不同的动画为每个页面虽然)

我想使用触发器函数:https://www.gatsbyjs.com/docs/how-to/adding-common-features/adding-page-transitions-with-plugin-transition-link/#using-the-trigger-function因为我想用Gsap

然后他们在代码中写了someCustomDefinedAnimation">但是我不知道这是从哪里来的，我如何创建一个，我如何通过props传递它。

<TransitionLink
exit={{
length: length,
trigger: ({ exit, node }) =>
this.someCustomDefinedAnimation({ exit, node, direction: "out" }),
}}
entry={{
length: 0,
trigger: ({ exit, node }) =>
this.someCustomDefinedAnimation({ exit, node, direction: "in" }),
}}
{...props}
>
{props.children}
</TransitionLink>

我的问题是:

• 我应该在哪里添加TransitionLink组件?
• 如何创建自定义Gsap动画?
• 我在哪里以及如何传递动画这作为道具，以便TransitionLink可以使用它?

Answer 1

但是他们只写代码someCustomDefinedAnimation但是我不知道这是从哪里来的，我如何创建一个和如何我通过props传递它

好吧，someCustomDefinedAnimation只是一个包含动画的定义函数。例如:

verticalAnimation = ({ length, direction}) => {
const directionTo = direction === 'up' ? '-100%' : '100%'
const directionFrom = direction === 'up' ? '100%' : '-100%'
// convert ms to s for gsap
const seconds = length
return gsap.timeline()
.set(this.transitionCover, { y: directionFrom })
.to(this.transitionCover, {
y: '0%',
ease: "power1.easeInOut",
duration: seconds / 2,
})
.set(this.layoutContents, { opacity: 0 })
.to(this.transitionCover, {
y: directionTo,
ease: "power1.easeIn",
duration: seconds / 2,
})
}

那么你需要使用它作为:

<TransitionLink
exit={{
length: length,
trigger: ({ exit, node }) =>
this.verticalAnimation({length: 100, direction: 'up'}),
}}
entry={{
length: 0,
trigger: ({ exit, node }) =>
this.verticalAnimation({length: 100, direction: "down" }),
}}
{...props}
>
{props.children}
</TransitionLink>

基本上，它允许您完全自定义在每个页面转换中触发的函数

您可以在TransitionLink文档中找到详细的解释和演练，并在他们的GitHub存储库中找到实现示例。