Анимация перед перенаправлением на другую страницу с использованием react, redux и react-router-redux

Я работаю над приложением, которое построено на внешнем интерфейсе с использованием реакции, редукции и реакции-маршрутизатора-редукции для навигации, и у меня нет большого опыта работы с интерфейсом. Когда мне нужно выполнить маршрутизацию с одной страницы на другую, сначала мне нужно показать анимацию, а затем, когда анимация закончится, мне нужно перейти на другую страницу. Я думал о запуске одного действия, которое добавит класс анимации, и когда это действие завершится, должен ли я использовать что-то похожее, например, setTimeout, поэтому, когда анимация заканчивается, действие push будет запущено из react-router-redux ? Каковы другие пути решения проблемы?


reactjs javascript redux react-redux react-router-redux
person Ivica Obadic    schedule 25.08.2016    source источник
comment
Ваше предложение установить тайм-аут звучит разумно, но может быть даже лучше, если действие, устанавливающее класс анимации, возвращает обещание, устанавливает сам тайм-аут, а затем разрешает обещание по истечении тайм-аута.   -  person Samo    schedule 25.08.2016

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать react-addons-css-transition-group

ReactCSSTransitionGroup основан на ReactTransitionGroup и представляет собой простой способ выполнения переходов и анимации CSS, когда компонент React входит или выходит из DOM. Он вдохновлен превосходной библиотекой ng-animate.

Это будет вызывать переход в вашем основном макете каждый раз, когда вы меняете маршрут.

CSS

.example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {
  opacity: 1;
}

.example-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0;
}

JS

import React from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'

const App = ({ children, location }) => (
  <div>
    <ul>
      <li><Link to="/page1">Page 1</Link></li>
      <li><Link to="/page2">Page 2</Link></li>
    </ul>

    <ReactCSSTransitionGroup
      component="div"
      transitionName="example"
      transitionEnterTimeout={500}
      transitionLeaveTimeout={500}
    >
      {React.cloneElement(children, {
        key: location.pathname
      })}
    </ReactCSSTransitionGroup>
  </div>
)

Полный пример

person Dmitriy Nevzorov    schedule 25.08.2016