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

Question

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

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