Пользовательский Javascript в Gatsby JS - PullRequest
Новая
       46

Пользовательский Javascript в Gatsby JS

0 голосов
/ 27 мая 2018

Я создал несколько небольших скриптовых функций, которые я хочу запускать каждый раз, когда страница загружается или обновляется.Ниже приведен пример библиотеки, созданной для сторонней библиотеки Anime JS, но в основном она произвольная, поскольку она одинакова для всех моих функций скрипта. 

import anime from 'animejs'

    if (typeof window !== `undefined`) {
      var bioLayerIn = anime.timeline();
      bioLayerIn
      .add({
        targets: ['.color-layer'],
        translateX: '100%',
        easing: 'easeInOutQuint',
        duration: 400
      })
      .add({
        targets: ['.color-layer'],
        translateX: '200.1%',
        easing: 'easeInOutQuint',
        duration: 430,
        delay:5
      });
      }

По некоторым причинам она запускается один раз когда я редактирую сценарий и сохраняю его, и никогда больше, пока я не внесу изменения в сценарий и не сохраню его снова.Я не уверен, как заставить Gatsby / React работать так, как это обычно делают функции javascript, каждый раз, когда страница загружается / обновляется.Я уверен, что это связано с тем, как Гэтсби связывает и маршрутизирует свои страницы.

Я знаю, что Гэтсби работает с пользовательским JS по-разному, поскольку он построен на платформе, но в документации Гэтсби нет четкого ответа.это объясняет это. На этой странице обсуждается добавление пользовательских js, но не для сторонней библиотеки

В настоящее время мой сценарий находится в / src / js / custom.js

1 Ответ

0 голосов
/ 28 мая 2018

Это потому, что код будет работать только после загрузки (он не будет перезагружен, когда я переключаю страницы).Мне нужно использовать https://www.gatsbyjs.org/docs/browser-apis/#onRouteUpdate, чтобы подключиться к событию изменения маршрута в gatsby-browser.js

Source

...