如何为Next.js图片添加点击触发的360度旋转动画？

你的问题主要出在三个地方：Next.js Image组件的DOM结构嵌套导致类加错了目标元素、直接操作DOM不符合React状态驱动逻辑、动画触发后无法重复执行。下面是修正后的实现方案：

步骤1：用React状态控制动画触发 #

放弃直接操作DOM，改用useState管理旋转状态，确保每次点击都能正确触发动画：

import Image from 'next/image';
import styles from './[你的样式文件名].module.css';
import { useState } from 'react';

export default function YourComponent() {
  const [isRotating, setIsRotating] = useState(false);

  // 点击触发旋转
  const handleRotate = () => {
    setIsRotating(true);
  };

  // 监听动画结束事件，重置状态以便下次触发
  const handleAnimationEnd = () => {
    setIsRotating(false);
  };

  return (
    <Image
      src="/images/user_rotate.png"
      height={20}
      width={20}
      alt="user_rotate"
      onClick={handleRotate}
      className={isRotating ? styles.rotateWrapper : ''}
      onAnimationEnd={handleAnimationEnd}
    />
  );
}

步骤2：修正CSS-Modules样式 #

Next.js的Image组件会自动生成外层wrapper容器，需要穿透容器选中内部img元素，同时简化冗余的keyframes：

.rotateWrapper img {
  /* linear保持匀速旋转，forwards让动画结束后停在360度状态 */
  animation: rotation 2s linear forwards;
}

/* 简化旋转动画，无需冗余的中间百分比步骤 */
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

关键问题说明 #

1. DOM结构问题：Next.js Image组件是嵌套容器结构，你之前通过id获取的是外层容器，动画没作用在图片上，所以用.rotateWrapper img穿透选中实际图片元素。
2. 动画重复触发：直接toggle类的话，动画执行一次后再次添加同名类不会重新触发，必须先移除类（通过状态重置），下次点击重新添加才能生效，用animationend事件监听结束比setTimeout更精准。
3. React最佳实践：避免直接操作DOM，用状态驱动视图是React核心逻辑，能避免框架内部DOM更新冲突，代码也更易维护。

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