Gatsby中自定义Anime JS脚本仅执行一次的问题求助

这个问题的核心是Gatsby作为基于React的单页应用（SPA），其客户端路由机制不会在页面切换时重新加载整个文档——你的初始脚本只在首次页面加载或开发模式热更新时执行一次，后续的路由切换或页面刷新（客户端层面的）不会再触发全局脚本的执行。下面是两种针对性的解决方案：

方案1：React组件生命周期绑定（推荐） #

将AnimeJS的动画逻辑与React组件的挂载生命周期绑定，利用useEffect钩子确保每次组件挂载时都执行动画。如果你的动画是全局通用的（比如页面过渡效果），可以把这段逻辑放在根布局组件（Layout.js）中；如果是特定页面的动画，就放在对应页面的组件里。

示例代码：

import React, { useEffect } from 'react';
import anime from 'animejs';

// 假设这是你的全局布局组件
const Layout = ({ children }) => {
  useEffect(() => {
    // 组件挂载时执行动画
    const 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
      });

    // 可选：组件卸载时清理动画（如果需要）
    return () => {
      bioLayerIn.pause();
    };
  }, []); // 空依赖数组确保仅在组件挂载时执行一次

  return <div className="layout-container">{children}</div>;
};

export default Layout;

方案2：监听Gatsby路由更新事件 #

如果你更倾向于保留全局脚本的写法，可以利用Gatsby提供的onRouteUpdate浏览器API，在每次路由切换完成后触发动画逻辑。这个方法适合全局层面的页面过渡效果。

在项目根目录的gatsby-browser.js文件中添加以下代码（如果没有这个文件就新建一个）：

import anime from 'animejs';

// 每次路由切换完成后执行
export const onRouteUpdate = () => {
  // 用setTimeout确保DOM已经更新完成，目标元素存在
  setTimeout(() => {
    const 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
      });
  }, 0);
};

关键注意点 #

• 确保目标DOM元素（.color-layer）在动画执行时已经存在：如果是特定页面的元素，建议把动画逻辑放在对应页面组件的useEffect中，或者在onRouteUpdate里先检查元素是否存在再执行动画。
• 开发模式下的热更新可能会重复触发动画，你可以通过判断环境来避免：比如在useEffect里添加if (process.env.NODE_ENV !== 'development')（不过通常开发模式下的重复触发不影响生产环境）。

内容的提问来源于stack exchange，提问作者gabed123