Запуск анимации путем прокрутки до предварительно определенного компонента / узла - PullRequest
Новая
       75

Запуск анимации путем прокрутки до предварительно определенного компонента / узла

0 голосов
/ 19 марта 2020

Я бы хотел иметь возможность "привязать" хук useScrollTrigger к указанному c Component / Node вместо значения по умолчанию window.

Ниже показано useScrollTrigger ожидаемые параметры: 

export interface UseScrollTriggerOptions {
  disableHysteresis?: boolean;
  target?: Node | Window;
  threshold?: number;
}

Я пытался передать ссылку на мой Компонент, но это вызвало взлом sh. Библиотека Material-UI не объясняет, как использовать useScrollTrigger для других вещей, кроме взаимодействия с AppBar.

Следующий фрагмент кода иллюстрирует то, чего я хотел бы достичь: 

const ref = React.useRef();
const scrollTrigger = useScrollTrigger({
  disableHysteresis: true,
  target: ref.current,
});

<Grid container spacing={2}>
  {services.map((service) => (
    <Grid key={uid(service)} item md={4} sm={6} xs={12}>
      <Grow
        mountOnEnter
        in={scrollTrigger}
        timeout={2048}
      >
        <Card
          ref={ref}
          className={classes.card}
          elevation={2}
        >
          <CardHeader --- REDACTED ---/>
          <CardContent --- REDACTED --->
            --- REDACTED ---
          </CardContent>
          <CardActions --- REDACTED --->
            --- REDACTED ---
        </Card>
      </Grow>
    </Grid>
  ))}
</Grid>
...