Задержка смены маршрута в Гэтсби

Question

Есть ли способ отложить смену маршрута в Гэтсби? Я бы использовал его для постепенного исчезновения страницы перед тем, как исчезнуть на новой странице. Я делаю это с помощью a pi gatsby-browser. Затухание новой страницы работает хорошо, но затухание старой не работает.

Answer 1

Не зная, что вы вообще пробовали и как добились эффекта плавного появления. Я бы предложил другой подход, который я всегда использовал для создания переходов между страницами (как постепенное появление, так и исчезновение и другие): использование gatsby-plugin-transition-link.

Он позволяет вам создавать свою собственную анимацию или использовать какие-то стандартные или предопределенные, вы можете проверить его демонстрационный сайт здесь, где есть пример нескольких переходов.

Для предопределенных переходов (самый простой способ) вам нужно только импортировать компонент de и использовать его следующим образом:

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

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

Для настраиваемых переходов вам необходимо определить de entry и выйти 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, но они обычно имеют самую грязную и сложную интеграцию, а также меньшую обратную связь (с точки зрения глобальных загрузок).