如何在Gatsby中使用Gsap实现多页面差异化过渡动画

1. TransitionLink组件的放置位置 #

• 若你需要为不同页面配置独立动画，建议分两类场景放置：
  • 全站通用跳转链接（如顶部导航栏、底部固定导航的跳转按钮）：放在Layout公共组件中，同时预留exit、entry动画属性的透传入口，方便不同页面调用Layout时传入专属动画配置
  • 页面内专属跳转链接（如卡片跳转、详情页返回按钮）：直接放在对应页面组件中，可直接为当前链接绑定独有的动画效果，不需要额外透传

2. 自定义Gsap动画创建方法 #

文档示例中的someCustomDefinedAnimation就是你自行封装的Gsap动画函数，创建步骤如下：

• 首先确保已经安装对应依赖：npm install gatsby-plugin-transition-link gsap
• 可单独抽离公共动画文件（如src/utils/gsapTransitions.js）统一管理所有动画，也可以在页面组件内直接定义动画函数
• 示例动画函数写法：

import gsap from "gsap"
// 自定义淡入淡出+上下位移动画
export const fadeSlideTransition = ({ node, direction, duration = 0.6 }) => {
  // 退场动画：向下位移 + 透明度降为0
  if (direction === "out") {
    return gsap.to(node, {
      y: 30,
      opacity: 0,
      duration: duration,
      ease: "power2.inOut"
    })
  }
  // 入场动画：从上方位移到原位 + 透明度升为1
  if (direction === "in") {
    // 先设置初始状态
    gsap.set(node, { y: -30, opacity: 0 })
    return gsap.to(node, {
      y: 0,
      opacity: 1,
      duration: duration,
      ease: "power2.inOut"
    })
  }
}

• 函数参数说明：node对应TransitionLink包裹的页面DOM节点，direction用于区分入场/退场动画，可自行扩展其他自定义参数

3. 动画属性的传递与使用方法 #

你可以直接在使用TransitionLink的位置，将动画函数绑定到exit和entry的trigger字段即可，示例如下：

import { TransitionLink } from "gatsby-plugin-transition-link"
import { fadeSlideTransition } from "../utils/gsapTransitions"
// 页面内直接使用示例
const HomePage = () => {
  const transitionDuration = 0.6
  return (
    <div>
      <h1>首页</h1>
      <TransitionLink
        to="/about"
        exit={{
          length: transitionDuration,
          trigger: ({ exit, node }) => fadeSlideTransition({ 
            node, 
            direction: "out", 
            duration: transitionDuration 
          })
        }}
        entry={{
          length: 0,
          trigger: ({ entry, node }) => fadeSlideTransition({ 
            node, 
            direction: "in", 
            duration: transitionDuration 
          })
        }}
      >
        跳转到关于页
      </TransitionLink>
    </div>
  )
}

如果是封装在Layout组件中的通用导航链接，可将动画配置作为props传入：

// Layout组件内的导航链接
const Layout = ({ exitAnimation, entryAnimation, children }) => {
  return (
    <div>
      <nav>
        <TransitionLink
          to="/"
          exit={exitAnimation}
          entry={entryAnimation}
        >
          首页
        </TransitionLink>
      </nav>
      {children}
    </div>
  )
}
// 页面调用Layout时传入专属动画
const AboutPage = () => {
  const transitionDuration = 0.8
  return (
    <Layout
      exitAnimation={{
        length: transitionDuration,
        trigger: ({ node }) => gsap.to(node, { x: "100%", duration: transitionDuration })
      }}
      entryAnimation={{
        length: 0,
        trigger: ({ node }) => gsap.from(node, { x: "-100%", duration: transitionDuration })
      }}
    >
      <h1>关于页</h1>
    </Layout>
  )
}

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