小编Cod*_*nkt的帖子

我想知道是否有人可以提供一些有关如何使用React.js实现动画组件/页面切换的见解.

我想要实现的是组件/页面转换,如http://www.semplicelabs.com/上的转换- 转换不透明度和margin-top的标题以及转换不透明度的内容.

当显示新的组件/页面时,当前显示的组件/页面应该在新的组件/页面转换之前转换出来.到目前为止LayoutComponent,我将页面组件呈现为CSSTransitionGroup:

import React from 'react/addons';

export default class LayoutComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { page: '' };
  },

  setPage(page) {
    this.setState({ page });
  }

  render() {
    return (
      <React.addons.CSSTransitionGroup transitionName='page'>
        {this.state.page}
      </React.addons.CSSTransitionGroup>
    );
  }
}

我还有两个页面组件,FirstPage和SecondPage.

import React from 'react';

export default class FirstPage extends React.Component {
  render() {
    return (
      <div>
        <header className='header'>
          <div className='container'>
            First Header
          </div>
        </header>
        <div …