свойство установки задержки в стиле компонента - PullRequest
Новая
       27

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

0 голосов
/ 14 октября 2018

Я новичок в Стилизованные компоненты

У меня есть "немой" React"компонент", который является Загрузчиком , и яхотел бы показать это после некоторой задержки.Я думал установить его свойство opacity или display по прошествии определенного времени, но я не уверен, как это сделать.

Если это невозможно, то возможно добавление или удалениекласс также будет работать (с такой же задержкой), но опять же, я не знаю, как это сделать на компоненте без состояния

Спасибо

Ответы [ 2 ]

0 голосов
/ 20 октября 2018

Если вы хотите чистый маршрут CSS, вы можете добавить ключевые кадры и анимацию в компонент загрузчика. 

animation: fade-in 0.5s ease-in-out forwards;

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }

, где второй параметр в animation - это задержка.Вы можете комбинировать это с некоторым условным рендерингом в jsx, чтобы задержать анимацию без использования settimeout

0 голосов
/ 15 октября 2018

Используйте состояние родительского элемента, чтобы решить, когда должен отображаться загрузчик.

Следующий код должен находиться в родительском компоненте, который отображает загрузчик.

В конструкторе инициализируйте состояние

this.state = {showLoader: false}

Определить функцию (в классе) для отображения компонента загрузчика.Определив его как функцию стрелки, вы автоматически привязываете его к классу, поэтому у нас нет проблем с передачей его в качестве обратного вызова. 

showLoader = () => {
    this.setState({ showLoader: true })
}

В componentDidMount задайте тайм-аут, когда вы хотите, чтобы загрузчик отображался, и передайтефункция showLoader в качестве обратного вызова.В этом примере он будет вызван через 1000 мс. 

componentDidMount() {
   setTimeout(this.showLoader, 1000)
}

В функции рендеринга, только если для этого состояния установлено значение true, будет отображаться Loader 

render() {
   const { showLoader } = this.state

   return (
      <div>
         ... other stuff
         {showLoader && <Loader \>}
      <\div>
   )
}

Надеюсь, это поможет !!

edit:

Если вы хотите использовать какой-то переход, вместо условного рендеринга компонента Loader, передайте ему состояние showLoader как опору и используйте его для условного добавленияclass.

Родительская функция рендеринга: аналогично предыдущему отрывку для строки, отображающей Loader 

<Loader show={showLoader} \>

В дочернем рендере, предполагая, что этот div оборачивает остальную часть разметки 

<div className={this.props.show ? ‘show’ : ‘’} \>

Тогда, если div начинается с opacity 0 и имеет свойство transition: opacity 1s (измените время на все, что вам подходит), тогда классу 'show' нужно будет просто добавить opacity 1

...