使用Nextjs和GSAP在标题悬停时动态显示图像

Next.js是一个基于React的轻量级框架，用于构建服务器渲染的React应用程序。GSAP（GreenSock Animation Platform）是一个强大的JavaScript动画库，用于创建流畅的动画效果。

在标题悬停时动态显示图像，可以通过以下步骤实现：

首先，确保你已经安装了Node.js和npm（Node包管理器）。
创建一个新的Next.js项目，可以使用以下命令：

npx create-next-app my-app

cd my-app

安装GSAP库：

npm install gsap

在pages目录下创建一个新的文件，例如index.js，并在其中编写以下代码：

import { useEffect } from 'react';
import gsap from 'gsap';

const IndexPage = () => {
  useEffect(() => {
    const title = document.querySelector('.title');
    const image = document.querySelector('.image');

    title.addEventListener('mouseenter', () => {
      gsap.to(image, { opacity: 1, duration: 0.5 });
    });

    title.addEventListener('mouseleave', () => {
      gsap.to(image, { opacity: 0, duration: 0.5 });
    });
  }, []);

  return (
    <div>
      <h1 className="title">标题</h1>
      <img className="image" src="/path/to/image.jpg" alt="图像" style={{ opacity: 0 }} />
    </div>
  );
};

export default IndexPage;