Question

我正在使用React，react-router，我有类似页面的组件。我希望在应用程序的主视图发生变化时实现两个相变过渡动画

<Link>
旧（当前）视图淡出（组件卸载？）
类似微调器的叠加动画＆＃34; loading＆＃34;显示
触发API调用并从服务器更新状态（使用AJAX）
状态已更新
类似微调的动画淡出
新加载状态的新组件淡入（组件装载？）

我期待指出我可以用react-router和<Link>的通用方式实现的事件，钩子和组件方法重载。

Answer 1

也许你可以试试： 1）onEnter 2）onLeave

方法来自react-router。

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

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

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

使用react-router进行组件加载和转换动画

2 个答案: