Next.js React项目中CSS动画添加类后无法播放问题

问题核心是CSS Modules的作用域隔离导致的：你代码里用了styles.button_2，说明启用了Next.js的CSS Modules特性，这种模式会给本地类名自动添加唯一哈希前缀（比如.button_2会变成类似.main_div_button_2__xYz9），而你直接通过classList.add添加的party-time是全局类名，和CSS文件里定义的.party-time（未被哈希处理）无法匹配，所以样式不生效。

下面是两种可行的解决方法：

方法一：将动画类声明为全局类 #

在CSS Modules文件中，用:global()包裹需要全局生效的类名，这样该类不会被添加哈希前缀：

:global(.party-time) {
    animation: party 2000ms infinite;
}

@keyframes party {
    0% { background: red; }
    20% { background: orangered; }
    40% { background: orange; }
    60% { background: red; }
    80% { background: orangered; }
    100% { background: orange; }
}

你的JS代码可以保持不变，直接通过ref添加party-time类即可。

方法二：用React状态管理类名（推荐） #

放弃直接操作DOM，改用React状态来控制类名，更符合React的状态驱动开发模式：

import { useState } from 'react';

// 组件内部代码
const [isPartyActive, setIsPartyActive] = useState(false);

const handleParty = () => {
    setTimeout(() => {
        setIsPartyActive(true);
    }, 10);
}

return (
    <div className={styles.main_div}>
        <button 
            className={`${styles.button_2} ${isPartyActive ? styles['party-time'] : ''}`}
            onClick={handleParty}
        >
            click for party
        </button>
    </div>
)

对应的CSS文件无需修改，保持原来的写法即可，此时party-time会被CSS Modules处理为带哈希的类名，和状态控制的类名完全匹配。

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