如何在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')
  );