Question

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

Answer 1

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

ReactCSSTransitionGroup基于ReactTransitionGroup，是一个在React中执行CSS过渡和动画的简便方法组件进入或离开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>
)

Full example

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

1 个答案: