如何在Next.js 13（TypeScript）+Tailwind中用GSAP实现指定悬停动画？

完全可以实现你要的装饰文字悬停切换效果，结合你的技术栈，给你两种实用方案：

方案一：纯Tailwind + CSS过渡（轻量无依赖） #

适合实现简单的切换效果，无需额外依赖，通过CSS过渡属性配合Tailwind状态类完成动画。

代码示例（Next.js 13 + TypeScript） #

import React from 'react';

const AnimatedText = () => {
  return (
    <div className="relative inline-block group cursor-pointer">
      {/* 默认显示的文字 */}
      <span className="block transition-all duration-300 group-hover:opacity-0 group-hover:-translate-y-2">
        初始装饰文字
      </span>
      {/* 悬停时显示的文字 */}
      <span className="absolute top-0 left-0 opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-2 text-red-500 text-lg font-bold">
        悬停替换文字
      </span>
    </div>
  );
};

export default AnimatedText;

关键说明 #

• 用relative容器包裹两个文字元素，第二个文字通过absolute定位覆盖在第一个上方
• 借助Tailwind的group和group-hover触发状态变化，通过opacity控制显隐，translate-y添加位移动画
• 可直接通过Tailwind类调整文字样式（颜色、字号、粗细）、动画时长和位移量

方案二：GSAP增强动画（支持复杂效果） #

如果需要更灵活的动画表现（比如弹性缓动、序列叠加动画），可以用GSAP实现精细控制。

代码示例（Next.js 13 + TypeScript + GSAP） #

import React, { useRef, useEffect } from 'react';
import gsap from 'gsap';

const GSAPAnimatedText = () => {
  const initialTextRef = useRef<HTMLSpanElement>(null);
  const hoverTextRef = useRef<HTMLSpanElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!initialTextRef.current || !hoverTextRef.current || !containerRef.current) return;

    // 初始化鼠标进入动画序列
    const hoverTimeline = gsap.timeline({ paused: true });
    hoverTimeline
      .to(initialTextRef.current, { opacity: 0, y: -12, duration: 0.35, ease: 'power2.out' })
      .to(hoverTextRef.current, { opacity: 1, y: 12, duration: 0.35, ease: 'power2.out' }, '-=0.25');

    // 初始化鼠标离开动画序列
    const leaveTimeline = gsap.timeline({ paused: true });
    leaveTimeline
      .to(hoverTextRef.current, { opacity: 0, y: -12, duration: 0.35, ease: 'power2.out' })
      .to(initialTextRef.current, { opacity: 1, y: 0, duration: 0.35, ease: 'power2.out' }, '-=0.25');

    // 绑定事件监听
    const container = containerRef.current;
    container.addEventListener('mouseenter', () => hoverTimeline.play());
    container.addEventListener('mouseleave', () => leaveTimeline.play());

    // 组件卸载时清理
    return () => {
      container.removeEventListener('mouseenter', () => hoverTimeline.play());
      container.removeEventListener('mouseleave', () => leaveTimeline.play());
      hoverTimeline.kill();
      leaveTimeline.kill();
    };
  }, []);

  return (
    <div ref={containerRef} className="relative inline-block cursor-pointer">
      <span ref={initialTextRef} className="block">初始装饰文字</span>
      <span 
        ref={hoverTextRef} 
        className="absolute top-0 left-0 opacity-0 text-blue-600 text-xl italic"
      >
        GSAP增强替换文字
      </span>
    </div>
  );
};

export default GSAPAnimatedText;

关键说明 #

• 通过useRef获取DOM元素，在useEffect中初始化GSAP时间线
• 分别定义鼠标进入/离开的动画序列，支持自定义缓动函数、动画时长和位移参数
• 可扩展添加旋转、缩放、颜色渐变等更复杂的动画效果

你可以根据需求选择方案，纯Tailwind方案适合快速实现基础效果，GSAP方案则能满足更个性化的动画需求。

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