React анимация загрузки и появления контента

Question

У меня есть компонент Kino, который загружает какие-то данные с сервера и рендерит их. Есть три состояния - isLoaded, error, items.

Пока isLoaded == false нужно отображать компонент Loading, когда isLoaded == true, то нужно отобразить компонент Kino с fade анимацией.

Я сделал, что у компонента Loading и Kino есть класс, который зависит от isLoaded - show и hide

let Content = () => {
// Передаю state через props
  if (this.props.isLoaded) {
    return ( 
      <React.Fragment >
        <Slogan / >
        <div className = "page-name" > Фильмы: < /div> 
        <ul className = "movies-grid grid" > {
        // films тоже state
          this.props.films.map(item => ( <
            MovieCard key = {
              item.id
            }
            movie = {
              item
            }
            title = {
              item.title
            }
            vote = {
              item.vote_average
            }
            />
          ))
        } 
        </ul> 
      </React.Fragment>
    );
  } else if (this.props.error) return <ErrorPage /> ;
  else if (this.props.films == false) return <ErrorPage /> ;
  else return null;
};

return ( 
  <React.Fragment>
    <Loading />
    <Content />
  </React.Fragment>
);

.loading {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  transition: all 5s;
}

.page.hide .loading {
  opacity: 1;
}

.page.show .loading {
  opacity: 0;
}

------------------------------------- 
.page.hide .movies-grid {
  opacity: 0;
}

.page.show .movies-grid {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Но transition не работает, как я понимаю из-за того, что в момент, когда должна начаться анимация, рендерятся элементы, которые загрузились

Как сделать, чтобы компоненты плавно сменяли друг друга, те сделать, чтобы работал transition?

Answer 1

Сделал cтейт add c 2мя состояниями true и false. Когда isLoaded == true стейт {add: false} А потом через n времени, например, 500мс, я меняю стейт на true

БЛОГ НА HUSL

React анимация загрузки и появления контента

Ответы (1 шт):