next.js CSS动画不在React中播放

ax6ht2ek 于 2023-04-30 发布在 React

关注(0)|答案(1)|浏览(117)

我正在建造一个下一个。js App with React

const partyButton = useRef(null)
    const handleParty = () => {
        setTimeout(() => {
        partyButton.current.classList.add('party-time');
        console.log(partyButton.current.classList)
        }, 10);
    }

    return (
        <div className={styles.main_div}>
            <button className={styles.button_2} ref={partyButton} onClick={handleParty}>click for party</button>
        </div>
    )
}

.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;
    }
}

classList显示classList中有动画。但什么也没发生。看起来像：DOMTokenList（2）['cssanimation_button_2__iAS4j'，'party-time'，value：'cssanimation_button_2__iAS4j party-time']

next.js

来源：https://stackoverflow.com/questions/76104316/css-animation-not-playing-in-react

1条答案

按热度按时间

mznpcxlj1#

在编写React代码时，永远不要设置或更改classList，就像你在示例中所做的那样。
相反，你应该使用一个状态：

const [animate, setAnimate] = useState(false);
    const handleParty = () => {
       setAnimate(true);
    }

    return (
        <div className={styles.main_div}>
            <button className={[styles.button_2, animate && "party-time"].join(" ")} onClick={handleParty}>click for party</button>
        </div>
    )

许多使用classnames或clsx包来处理className。
如果你的类“party-time”使用某种CSS-in-JS或CSS模块设置，你可能需要将它重命名为party_time或partyTime，并使用styles.partyTime而不是"party-time"设置它

赞(0）回复(0）举报 2023-04-30

我来回答

next.js CSS动画不在React中播放

1条答案

相关问题

热门标签

最新问答