React实现元素每10秒刷新及CSS动画完成后切换图片

要实现动画完成后切换图片+每10秒自动刷新的需求，得利用React的状态管理和事件监听来触发组件重渲染，具体改法如下：

• 引入React的useState和useEffect钩子，用状态控制当前显示的图片，状态变化时组件会自动重新渲染，加载新的随机图片。
• 写一个切换图片的方法，每次调用生成新的随机图片并更新状态。
• 同时处理两个触发条件：CSS动画结束事件、10秒定时任务，两者都触发切换图片的方法。
• 组件卸载时清理定时器和事件监听，避免内存泄漏。

修改后的代码示例：

import { useState, useEffect } from 'react';

export function Anibox() {   
    // 用状态存储当前图片，初始值为随机图片
    const [currentImage, setCurrentImage] = useState(trumpImage());

    // 切换图片的方法
    const changeImage = () => {
        setCurrentImage(trumpImage());
    };

    useEffect(() => {
        // 10秒定时刷新
        const timer = setInterval(changeImage, 10000);

        // 获取aniBall元素，监听动画结束事件
        const aniBall = document.getElementById('aniBall');
        const handleAnimationEnd = () => {
            changeImage();
        };
        aniBall?.addEventListener('animationend', handleAnimationEnd);

        // 清理函数：组件卸载时清除定时器和事件监听
        return () => {
            clearInterval(timer);
            aniBall?.removeEventListener('animationend', handleAnimationEnd);
        };
    }, []); // 空依赖数组，确保只在组件挂载时执行一次

    return (
        <div id="anibox">
            <span id="aniBall">{currentImage}</span>
        </div>
    )
}

关键说明 #

• 把原来直接调用trumpImage()改成用状态currentImage渲染，每次状态更新都会触发组件重渲染，显示新的随机图片。
• animationend事件会在CSS动画完成后触发，此时调用切换方法就能实现动画结束换图。
• 定时器每10秒触发一次切换，满足自动刷新需求。
• 清理函数里的操作是为了避免组件卸载后定时器和事件监听还在运行，防止内存泄漏。

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