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

Question

我正在开发一个应用程序，它构建在前端，使用react、redux和react路由器-redux来导航，而且我没有太多的前端解释。当我需要执行从一个页面到另一个页面的路由时，首先我需要显示动画，然后在动画完成后，我需要导航到另一个页面。我正在考虑启动一个动作来添加动画类，当这个动作完成时，我是否应该使用类似于setTimeout的东西，所以当动画结束时，要从启动推送动作吗？找到解决这个问题的其他方法是什么？

Answer 1

您可以使用反应性-加载项-css-过渡-组

ReactCSSTransitionGroup是基于ReactTransitionGroup的，当一个反应组件进入或离开DOM时，它是执行CSS转换和动画的一种简单方法。它受到了优秀的ng动画库的启发。

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

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

全例