Реагировать на маршрутизатор и переходы наложения полной страницы - PullRequest
Новая
       50

Реагировать на маршрутизатор и переходы наложения полной страницы

0 голосов
/ 29 мая 2019

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

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

Однако я не могу найти способ справиться с этой реакцией.Если бы это не было реакцией, я мог бы просто анимировать через div при загрузке всего HTML-кода других страниц с помощью JS, а затем поменять необходимые разделы контента.

В настоящее время я использую React 16.3 с реактивным маршрутизатором DOM 5.0

1 Ответ

0 голосов
/ 29 мая 2019

Вы можете сделать это с помощью ключевых кадров CSS 

this.state = {
    visible: false
}

componentDidMount() {
      this.setState({visible: true})
}

  <div className={this.state.visible
                    ? "backdrop"
                    :  null}>
 </div>

.backdrop {
  z-index: 1;
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation-name: animate-backdrop;
  animation-duration: 2s;
  animation-timing-function: linear;
}

@keyframes animate-backdrop {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0%);
  }
}

Не уверен, какой у вас уровень мастерства в CSS, но z index 1 обеспечит фон для всего вашего контента. Фактическая анимация будет выполнена с помощью transform и translateX.

React Router не должен играть никакой роли в этом. Вы можете выполнить анимацию в самом компоненте, когда компонент сначала загружается, изменив состояние свойства visible с false на true, это даст этому пустому div имя класса CSS, которое вызовет анимацию.

Таким образом, по существу, когда компонент загружается, состояние изменяется, и анимация будет иметь место.

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

...