使用 react-router 的组件加载和过渡动画答案

【问题标题】：Component loading and transition animations with react-router使用 react-router 的组件加载和过渡动画
【发布时间】：2016-06-28 14:27:16
【问题描述】：

我正在使用 React、react-router，并且我有类似页面的组件。当应用程序的主视图发生变化时，我想实现两个阶段过渡动画

<Link> 被点击
旧（当前）视图淡出（组件卸载？）
会显示类似微调器的叠加动画“正在加载”
API 调用被触发并从服务器更新状态（使用 AJAX）
状态已更新
类似微调器的动画淡出
新加载状态的新组件淡入（组件安装？）

我正在寻找指针，我可以使用哪些事件、钩子和组件方法重载来以通用方式为 react-router 和 <Link> 实现这一点。

【问题讨论】：

您有没有找到解决原始问题的方法？正在寻找相同的实现，但到目前为止还没有找到任何示例。

标签： reactjs transition react-router

【解决方案1】：

也许你可以试试： 1) onEnter 2) 离开

来自 react-router 的方法。

https://github.com/reactjs/react-router/blob/master/docs/API.md

您可以使用上述两种方法在状态下翻转开关以更改 UI 以使微调器出现/消失等。

【讨论】：

【解决方案2】：

你可以使用 ReactCSSTransitionGroup

import React from 'react'
import { render } from 'react-dom'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import { browserHistory, Router, Route, IndexRoute, Link } from 'react-router'
import './app.css'

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

const Index = () => (
  <div className="Image">
    <h1>Index</h1>
    <p>Animations with React Router are not different than any other animation.</p>
  </div>
)

const Page1 = () => (
  <div className="Image">
    <h1>Page 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing</p>
  </div>
)

const Page2 = () => (
  <div className="Image">
    <h1>Page 2</h1>
    <p>Consectetur adipisicing elit, se.</p>
  </div>
)

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Index}/>
      <Route path="page1" component={Page1} />
      <Route path="page2" component={Page2} />
    </Route>
  </Router>
), document.getElementById('example'))

css

.Image {
  position: absolute;
  height: 400px;
  width: 400px;
}

.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;
}

.link-active {
  color: #bbbbbb;
  text-decoration: none;
}

【讨论】：

我知道过渡组。但是这个答案没有显示如何在组件加载其状态之前绑定微调器动画。