Question

这是我目前为止的代码和here is a working fiddle as well。

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过渡动画来隐藏和显示要显示的选定内容。单击菜单项A 或菜单项B ，然后 FadeOut 显示菜单上方的活动文本和 FadeIn 新内容。

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

Answer 1

你可以尝试一下，然后用问题报告 - https://facebook.github.io/react/docs/animation.html。这是相当直截了当的，但为了让我做对，我还是花了一些时间。

Answer 2

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

您should not使用git rm -rf作为全局变量 - 我已将该部分清理为context。

props

如何在onClick事件中使用ReactJS FadeOut / FadeIn内容？

2 个答案: