reactjs - Material-UI 和 React : Using the Fade component onScroll

Question

我是使用 Material-UI 的新手。我想用它的Fade component淡入一个元素。我可以这样做:

<Fade in timeout={3000}>
    <Typography variant="h3" className={classes.h3} gutterBottom>About Me</Typography>
</Fade>

Fade 组件可以正常工作，但会在页面加载后立即执行。如何延迟动画直到用户向下滚动到页面上元素的位置？我在文档中没有看到任何 onScroll 属性。 Material-UI 是否提供了一种在滚动时执行 Fade 的方法，还是我必须将另一个库与 Material-UI 结合使用？

Answer 1

您可以利用 Fade 组件的 in 属性，并且只能有条件地设置为 true。

所以在你的情况下你需要做这样的事情 -

import VizSensor from 'react-visibility-sensor'; // or use any other 3rd party plugin or define your own

function comp=(props) => {

    let [active, setActive] = useState(false);

    return (
        <VizSensor
            onChange={(isVisible) => {
                setActive(isVisible);
            }}
        >
            <Fade in={active} timeout={3000}>
                <Typography variant="h3" className={classes.h3} gutterBottom>About Me</Typography>
            </Fade>
        </VizSensor>
    )

}