Question

好的，我对使用React进行舒适的原生页面转换有所了解。我举例说明了页面必须如何在它们之间转换 - you can check it here。

然后我开始用React编程。而且我已经停滞不前了。

假设我有一个组件场景：

export default class Scene extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      beforeUnmount: false
    }
}

  render() {
    return (
      <div
        className={ classNames({ "scene-container": true, "scene-unmount": this.state.beforeUnmount })}
        style={{ backgroundColor: this.props.color}}>

        <h1 style={{ marginTop: "25%", textAlign: "center" }}> Scene { this.props.id } </h1>
        { this.props.children }
      </div>
    )
  }
}

和使用此场景的TestPage视图（AnotherTestPage大致相同）：

export default class TestPage extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div>
        <Helmet
          title={`Scene ${this.props.params.id}`}
          meta={[{name: 'description', content: 'Index page'}]}
        />

        <Scene id={ this.props.params.id } color= {`#${this.props.params.color}`}>
          <DefaultLink to="/" text="Go to Index" />
          <DefaultLink to="/another" text="Go to Another" />
        </Scene>
      </div>
    )
  }
}

和路由器

export function createRoutes(history, store) {

  return (
    <Router>
      <Route component={App}>
        <Route path='/' component={IndexPage} />
        <Route path='/forms' component={Forms} />
        <Route path='/scenes/:id/:color' component={TestPage} />
        <Route path='/another' component={AnotherTestPage} />
      </Route>
    </Router>
  )
}

在卸载当前视图之前，必须有场景的淡出动画，同时下一个视图应该淡入。而我的问题是我不知道该怎么做，如何超时卸载视图。如果有人帮助我，我将非常感谢！

Answer 1

React中的动画是在React ad-on的帮助下完成的：react-addons-css-transition-group

React Router中的一个示例可以完成您尝试实现的目标（页面转换之间的动画）：https://github.com/ReactTraining/react-router/tree/master/examples/animations

组件卸载超时

1 个答案: