如何在onClick事件中使用ReactJS淡出/淡入内容？

Question

到目前为止，这是我的代码， 这也是一个有效的小提琴 。

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var FooterMenu = React.createClass({
  onClick: function (type) {
    var content;

    switch (type) {
      case 'A':
      content = <p>Etiam feugiat lorem non metus. Nulla sit amet est. Vivamus aliquet elit ac nisl. Praesent egestas tristique nibh. Morbi nec metus.
                Morbi vestibulum volutpat enim. Pellentesque posuere. Curabitur at lacus ac velit ornare lobortis. In turpis. Donec posuere vulputate arcu.                                 Donec posuere vulputate arcu. Maecenas malesuada. Ut varius tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et                                       ultrices posuere cubilia Curae; Fusce id purus. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.</p>;
      break;
      case 'B':
          content = <p>Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nunc sed turpis. Duis leo. Pellentesque habitant morbi                                       tristique senectus et netus et malesuada fames ac turpis egestas. Nullam cursus lacinia erat. Vestibulum purus quam, scelerisque ut,                                           mollis sed, nonummy id, metus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nunc nulla. Donec mollis                                            hendrerit risus. Etiam ultricies nisi vel augue. In consectetuer turpis ut velit. Vivamus aliquet elit ac nisl. In dui magna, posuere                                       eget, vestibulum et, tempor auctor, justo. Vestibulum ullamcorper mauris at ligula. Vivamus euismod mauris.</p>;
      break;
      default:
      throw new Error('Unimplemented type');
    }
    this.props.setActiveContent(content);
  },
  render: function () {
    return (
      <footer className="footer">
        <div className="container">
          <div className="row">
            <div className="col-md-6">
              <ul className="text-muted list-inline main-menu">
                <li onClick={this.onClick.bind(this, 'A')}>Menu Item A</li>
                <li onClick={this.onClick.bind(this, 'B')}>Menu Item B</li>
              </ul>
            </div>
            <div className="col-md-6">
            </div>
          </div>
        </div>
      </footer>
      );
  }
});
var MainContent = React.createClass({
  contextTypes: {
    activeContent: React.PropTypes.any
  },
  render: function () {
    return (
      <div className="container">
        <div className="row">{this.context.activeContent}</div>
      </div>
      );
  }
});
var MainContentWrapper = React.createClass({
  render: function () {
    return (
      <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300} >
        <MainContent />
      </ReactCSSTransitionGroup>
    );
  }
});
var App = React.createClass({
  getInitialState: function () {
    return {
      activeContent: <h1>Vivamus aliquet elit ac nisl</h1>
    }
  },
  childContextTypes: {
    activeContent: React.PropTypes.any
  },
  getChildContext: function () {
    return {
      activeContent: this.state.activeContent
    };
  },
  setActiveContent: function (content) {
    this.setState({activeContent: content});
    setTimeout(function(){
      this.replaceState(this.getInitialState());
    }.bind(this),60000);
  },
  render: function () {
    return (
      <div>
        <MainContentWrapper />
        <FooterMenu setActiveContent={this.setActiveContent} />
      </div>
      );
  }
});
ReactDOM.render(
  <App />,
  document.getElementById('container')
  );

我要做的就是创建一个FadeOut / FadeIn过渡动画以隐藏和显示要显示的选定内容。 当菜单项或菜单项B点击，然后淡出激活文本显示菜单和淡入新的内容上面。

我怎么能做到这一点？ 我是ReactJS的新手

Answer 1

您可以尝试一下并通过问题报告-https: //facebook.github.io/react/docs/animation.html 。 这很简单，但是我花了一些时间才能让自己正确。

Answer 2

这不是一个很好的例子，但是它可以满足您的需求（ https://jsfiddle.net/jp20ey2g/7/ ）。

而且，您不应该将context用作全局变量-我已经清理了部分内容以支持props 。

var FooterMenu = React.createClass({
  onClick: function (type) {
    var content;

    switch (type) {
      case 'A':
      content = <p>Etiam feugiat lorem non metus. Nulla sit amet est. Vivamus aliquet elit ac nisl. Praesent egestas tristique nibh. Morbi nec metus.
                Morbi vestibulum volutpat enim. Pellentesque posuere. Curabitur at lacus ac velit ornare lobortis. In turpis. Donec posuere vulputate arcu.                                 Donec posuere vulputate arcu. Maecenas malesuada. Ut varius tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et                                       ultrices posuere cubilia Curae; Fusce id purus. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.</p>;
      break;
      case 'B':
          content = <p>Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nunc sed turpis. Duis leo. Pellentesque habitant morbi                                       tristique senectus et netus et malesuada fames ac turpis egestas. Nullam cursus lacinia erat. Vestibulum purus quam, scelerisque ut,                                           mollis sed, nonummy id, metus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nunc nulla. Donec mollis                                            hendrerit risus. Etiam ultricies nisi vel augue. In consectetuer turpis ut velit. Vivamus aliquet elit ac nisl. In dui magna, posuere                                       eget, vestibulum et, tempor auctor, justo. Vestibulum ullamcorper mauris at ligula. Vivamus euismod mauris.</p>;
      break;
      default:
      throw new Error('Unimplemented type');
    }
    this.props.setActiveContent(content);
  },
  render: function () {
    return (
      <footer className="footer">
        <div className="container">
          <div className="row">
            <div className="col-md-6">
              <ul className="text-muted list-inline main-menu">
                <li onClick={this.onClick.bind(this, 'A')}>Menu Item A</li>
                <li onClick={this.onClick.bind(this, 'B')}>Menu Item B</li>
              </ul>
            </div>
            <div className="col-md-6">
            </div>
          </div>
        </div>
      </footer>
      );
  }
});
var MainContent = React.createClass({
  componentWillReceiveProps: function (nextProps) {
    if (this.props.content !== nextProps.content) {
        this.setState({ opacity: 0 })
    }
  },
  getInitialState: function () {
    return { opacity: 1 }
  },
  componentDidUpdate: function () {
    if (this.state.opacity !== 1) {
      setTimeout(() => {
        this.setState({ opacity: 1 })
      }, 200)
    }
  },
  render: function () {
    var style = {
        opacity: this.state.opacity,
      transition: this.state.opacity > 0 ? 'opacity 0.2s ease-in' : 'none'
    }
    console.log(this.state.opacity)
    return (
      <div className="container">
        <div className="row" style={style}>
            {this.props.content}
        </div>
      </div>
      );
  }
});

var App = React.createClass({
  getInitialState: function () {
    return {
      activeContent: <h1>Vivamus aliquet elit ac nisl</h1>
    }
  },
  childContextTypes: {
    activeContent: React.PropTypes.any
  },
  getChildContext: function () {
    return {
      activeContent: this.state.activeContent
    };
  },
  setActiveContent: function (content) {
    this.setState({activeContent: content});
    setTimeout(function(){
      this.replaceState(this.getInitialState());
    }.bind(this),60000);
  },
  render: function () {
    return (
      <div>
        <MainContent content={this.state.activeContent} />
        <FooterMenu setActiveContent={this.setActiveContent} />
      </div>
      );
  }
});
ReactDOM.render(
  <App />,
  document.getElementById('container')
  );