Можно ли отложить переход Фейд?

Question

Цель: я хочу, чтобы переход Фэйда произошел по истечении определенного времени (например, 4000 миллисекунд).

Вот фрагмент моего кода:

<Fade in timeout={{ enter: 8000 }}>
  <Box display="flex" justifyContent="center">
    <IconButton href="https://soundcloud.com/jyillamusic">
      <Soundcloud />
    </IconButton>
    <IconButton href="https://www.instagram.com/justinyum98/">
      <Instagram />
    </IconButton>
  </Box>
</Fade>

Ожидаемый результат:С enter: 8000 я ожидаю, что переход произойдет через 8000 миллисекунд.

Фактический результат: переход начинается с 0 миллисекунд, заканчивается через 8000 миллисекунд.

Поддерживает ли Fade задержку перехода Fade нав какое-то определенное время?

(Глядя на API Fade , я предположил, что duration.enteringScreen означало, что это был миллисекунд до перехода, но я, вероятно, ошибаюсь.)

Answer 1

Fade не реализует функцию задержки, однако вы можете вручную обработать ваш статус перехода , используя in.

в

Показать компонент;запускает состояния входа или выхода
тип : логическое значение
по умолчанию : ложное значение

В коде вы можете сделать:

<Fade in={this.state.in} timeout={{ enter: 8000 }}>
  <Box display="flex" justifyContent="center">
    <IconButton href="https://soundcloud.com/jyillamusic">
      <Soundcloud />
    </IconButton>
    <IconButton href="https://www.instagram.com/justinyum98/">
      <Instagram />
    </IconButton>
  </Box>
</Fade>

И на дисплее запустите тайм-аут ожидания и создайте задержку

this.state = {
    in: false
};

setTimeout(() => {
    setState({ in: true });
}, 8000);