时间戳

首页 > 解决方案 > 延迟盖茨比的路线变更

gatsby - 延迟盖茨比的路线变更

问题描述

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

标签： gatsbypage-transition

解决方案

根本不知道您尝试过什么以及如何实现淡入效果。我会建议另一种方法，这是我一直用来创建页面转换（淡入、淡出和其他）的方法：使用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插件，但它们通常具有最肮脏和更复杂的集成，反馈也更少（就全局下载而言）。

推荐阅读