如何配置react-countup实现滚动进入可视区仅首次触发计数动画

核心思路是新增一个状态标记动画是否已经触发过，仅在未触发且元素首次进入可视区时执行动画逻辑。

具体修改步骤 #

• 先在组件内引入useState Hook，定义是否已经触发过动画的状态

import { useState } from 'react';
import CountUp from 'react-countup';
import VisibilitySensor from 'react-visibility-sensor';

// 组件内部逻辑
const [hasAnimated, setHasAnimated] = useState(false);

• 修改VisibilitySensor的onChange回调逻辑，仅满足「元素可见」且「未触发过动画」两个条件时才执行动画

<CountUp start={0} end={4.8} duration={2} decimals={1}>
    {({ countUpRef, start }) => (
        <VisibilitySensor 
            onChange={(isVisible) => {
                if (isVisible && !hasAnimated) {
                    start();
                    setHasAnimated(true);
                }
            }}
        >
            <span ref={countUpRef} />
        </VisibilitySensor>
    )}
</CountUp>

原理说明 #

• VisibilitySensor的onChange回调会接收一个布尔值参数isVisible，代表元素当前是否处于可视区域
• 新增的hasAnimated状态会在首次触发动画后设置为true，后续即使元素再次进入可视区，也不会满足触发条件，不会重复执行动画
• 如果有多个计数器需要控制，可把状态定义为对象/数组，按索引区分不同计数器的触发状态即可

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