1

有没有办法延迟盖茨比的路线变更?在淡入新页面之前,我会使用它来淡出页面。我正在使用 gatsby-browser api 执行此操作。淡入新页面效果很好,但淡出旧页面不起作用。

4

1 回答 1

0

根本不知道您尝试过什么以及如何实现淡入效果。我会建议另一种方法,这是我一直用来创建页面转换(淡入、淡出和其他)的方法:使用gatsby-plugin-transition-link

它允许您创建自定义动画或使用一些默认或预定义的动画,您可以在此处查看其演示站点,其中有一些转换的示例。

对于预定义的转换(最简单的方法),您只需要导入 de 组件并像这样使用它:

import AniLink from "gatsby-plugin-transition-link/AniLink"

<AniLink paintDrip to="page-2">
  Go to Page 2
</AniLink>

对于自定义转换,您需要定义 deentry和 exit effect,例如:

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

有关更多信息,请查看他们的文档

此外,有很多gatsby-page-transitions插件,但它们通常具有最肮脏和更复杂的集成,反馈也更少(就全局下载而言)。

于 2020-03-21T23:02:36.233 回答