Material-UI & React: Использование компонента Fade на Scroll

Question

Я новичок в использовании Material-UI. Я хочу использовать его Fade компонент , чтобы добавить элемент. Я могу сделать это следующим образом:

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

Компонент Fade работает правильно, но выполняется сразу же после загрузки страницы. Как я могу отложить анимацию до тех пор, пока пользователь не прокрутит вниз, где находится элемент на странице? Я не вижу onScroll свойства в документации. Предоставляет ли Material-UI способ выполнения Fade при прокрутке или мне нужно использовать другую библиотеку вместе с Material-UI?

Answer 1

Вы можете использовать in свойство компонента Fade и только при условии, что оно установлено на 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>
    )

}