javascript - Gatsby JS 中的自定义 Javascript

Question

我创建了一些小脚本函数，希望在每次页面加载或刷新时触发它们。下面是为第三方库 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 函数传统上运行的方式运行，即每次加载/刷新页面时。我确信这与 Gatsby 链接和路由其页面的方式有关。

我知道 Gatsby 以不同的方式处理自定义 JS，因为它是构建在框架上的，但 Gatsby 的文档中没有明确的答案来解释这一点。 This页面讨论添加自定义 js，但如果是第三方库则不讨论

目前我的脚本位于/src/js/custom.js

Answer 1

这是因为代码只会在加载后运行(当我切换页面时不会重新加载)。我需要使用https://www.gatsbyjs.org/docs/browser-apis/#onRouteUpdate Hook gatsby-browser.js 中的路由更改事件

Source