ReactJS：React CountUp 在可见性传感器中仅可见一次答案

【问题标题】：ReactJS: React CountUp visible only once in visibility sensorReactJS：React CountUp 在可见性传感器中仅可见一次
【发布时间】：2019-07-08 05:16:23
【问题描述】：

我正在处理具有visibility sensor 的页面，因此每当我滚动到该部分时，动画就会开始。但是，我只需要它只显示一次。

const [scrollStatus, setScroll] = useState(false);
    const contextData = {
        stateSetters: {
            scrollStatus
        }

    }

<ScrollContext.Provider value={contextData}>
    <VisibilitySensor onChange={() => {
       setScroll(!scrollStatus);
    }}>
    <CountUp start={0} end={scrollStatus ? 0 : 40} duration={1.75} suffix="+"/>
    </VisibilitySensor>
</ScrollContext.Provider>

我目前正在使用钩子和功能组件。我一直在寻找能够在查看后将可见性设置为 true 的方法。

输出应该已经可见，而不是仅在每次滚动时都可见。

【问题讨论】：

标签： reactjs react-hooks react-animations

【解决方案1】：

如dee zg所说，可以通过isVisible事件属性和active属性来设置VisibilitySensor的状态，大致如下例所示。

可以在codesandbox 上找到一个小的运行代码示例。

import React from "react";
import VisibilitySensor from "react-visibility-sensor";

class myTest extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            VizSensorActive: true
        };

        this.do_something = this.do_something.bind(this);
    }

    do_something(isVisible) {
        if (isVisible) {
            this.setState({ VizSensorActive: false });
        }
    }

    render() {
        return (
            <VisibilitySensor
                active={this.VizSensorActive}
                onChange={this.do_something}
            >
                <div>Test</div>
            </VisibilitySensor>
        );
    }
}

export default myTest;

【讨论】：

【解决方案2】：

您可能不想无条件地切换状态，而只是在可见性传感器使用isVisible=true 调用其onChange 回调时将其设置为true

所以，像这样（我还没有测试过）：

function handleVisibility(isVisible) {
!scrollStatus &&
isVisible &&
setScroll(isVisible);
}

<VisibilitySensor onChange={handleVisibility}>

【讨论】：

【解决方案3】：

这是一个使用 react-countup 和 react-visibility-sensor 仅查看一次效果的简单示例

import React from "react";
import CountUp from "react-countup";
import VisibilitySensor from "react-visibility-sensor";

function Milestones() {
    const [focus, setFocus] = React.useState(false);
    return (
        <CountUp start={focus ? 0 : null} end={150} duration={4} redraw={true}>
            {({ countUpRef }) => (
                <VisibilitySensor onChange={(isVisible) => {
                    if (isVisible) { setFocus(true); }
                }}>
                    <span ref={countUpRef} />
                </VisibilitySensor>
            )}
        </CountUp>
    )
}

export default Milestones;

【讨论】：