使用 react、redux 和 react-router-redux 路由到另一个页面之前的动画

Question

我正在开发一个在前端构建的应用程序，使用 react、redux 和 react-router-redux 进行导航，但我没有太多的前端经验。当我需要执行从一个页面到另一个页面的路由时，首先我需要显示动画，然后在动画结束后，我需要导航到另一个页面。我正在考虑触发一个将添加动画 class 的动作，当该动作完成时，我是否应该使用类似 setTimeout 的东西，以便在动画结束时从 react-router-redux 触发推送动作？还有哪些其他方法可以找到解决问题的方法？

Answer 1

您可以使用 react-addons-css-transition-group

ReactCSSTransitionGroup is based on ReactTransitionGroup and is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. It's inspired by the excellent ng-animate library.

这将在您每次更改路线时触发主布局中的转换

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>
)

Full example

使用 react、redux 和 react-router-redux 路由到另一个页面之前的动画

Animation before routing to another page using react, redux and react-router-redux

javascript

reactjs

redux

react-redux

react-router-redux