0

我正在处理具有可见性传感器的页面，因此每当我滚动到该部分时，动画就会开始。但是，我只需要它只可见一次。

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 的方法。

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

4

3 回答 3

1

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

可以在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;
于 2020-05-27T12:26:44.803 回答
0

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

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

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

<VisibilitySensor onChange={handleVisibility}>
于 2019-07-08T06:14:01.743 回答
0

这是使用 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;
于 2020-09-20T23:24:42.347 回答