时间戳

首页 > 解决方案 > 如何使用 Gsap 在 gartsby 中的页面之间添加动画

reactjs - 如何使用 Gsap 在 gartsby 中的页面之间添加动画

问题描述

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

我试图关注他们的文档：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/#getting-started

但是我不知道在哪里使用，应该在实际页面组件中使用还是在布局组件中使用？（我希望每个页面都有不同的动画）

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

但后来他们只是写在代码“someCustomDefinedAnimation”中，但我不知道它来自哪里，我如何创建一个以及如何通过道具传递它。

<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>

所以我的问题是：

标签： reactjsgatsbygsap

解决方案

但是他们只是写在代码中，someCustomDefinedAnimation但我不知道它来自哪里，我如何创建一个以及如何通过道具传递它。

好吧，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>

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

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

推荐阅读