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

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

javascript animation reactjs

Javascript 如何在onClick事件中使用ReactJS淡出/淡出内容？,javascript,animation,reactjs,css-animations,Javascript,Animation,Reactjs,Css Animations,这是迄今为止我的代码 var reactcstransitiongroup=React.addons.cstransitiongroup； var FooterMenu=React.createClass({ onClick：函数（类型）{ var含量；开关（类型）{ 案例“A”：内容=Etiam feugiat lorem non metus.nullas sit amet est.Vivamus aliquet elit ac nisl.present egestas tristique

这是迄今为止我的代码

var reactcstransitiongroup=React.addons.cstransitiongroup；
var FooterMenu=React.createClass({
onClick：函数（类型）{
var含量；
开关（类型）{
案例“A”：
内容=Etiam feugiat lorem non metus.nullas sit amet est.Vivamus aliquet elit ac nisl.present egestas tristique nibh.Morbi nec metus。
在turpis的lacus ac velit ornare lobortis.的Morbi前庭蜗壳。Perlentesque posuere。Curabitur。Donec posuere vulputate arcu。Donec posuere vulputate arcu。Donec posuere vulputate arcu。Maecenas Maesuada。Ut varius tincidut libero。faucibus orci luctus et ultri的前同侧前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭；
打破
案例“B”：
内容=，mollis sed，Nonumy id，metus.turpis前庭sem，aliquet eget，lobortis Pellentsque，rutrum eu，nisl.Nunc nulla.Donec mollis hendrerit risus.ultricies nis vel augue.在turpis ut velit.连续的turpis中，在posuere.在dui magna，Vivamus aliquet Elite ac nisl.中eget，前庭et，临时拍卖人，ullamcorper mauris，ligula，Vivamus euismod mauris，justo.前庭ullamcorper mauris.；
打破
违约：
抛出新错误（“未实现类型”）；
}
this.props.setActiveContent（content）；
},
渲染：函数（）{
返回(

菜单项A
菜单项B

);
}
});
var MainContent=React.createClass({
上下文类型：{
activeContent:React.PropTypes.any
},
渲染：函数（）{
返回(
{this.context.activeContent}
);
}
});
var MainContentWrapper=React.createClass({
渲染：函数（）{
返回(
);
}
});
var App=React.createClass({
getInitialState:函数（）{
返回{
活动内容：Vivamus aliquet elit ac nisl
}
},
childContextTypes：{
activeContent:React.PropTypes.any
},
getChildContext:函数（）{
返回{
activeContent:this.state.activeContent
};
},
setActiveContent:函数（内容）{
this.setState（{activeContent:content}）；
setTimeout（函数（）{
this.replaceState（this.getInitialState（））；
}.bind（本），60000）；
},
渲染：函数（）{
返回(
);
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);

我想做的就是创建一个淡出/淡出过渡动画来隐藏和显示要显示的选定内容。单击菜单项A或菜单项B，然后淡出菜单上方显示的活动文本，并使用新内容淡入淡出

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

您可以尝试一下，然后用问题-进行报告。这相当直截了当，但我需要一点努力才能做到正确。

你可以尝试一下，然后回答问题-。这是一个相当直接的例子，但我需要一点努力才能做到正确。

这不是一个很好的例子，但它满足了您的需要（）

您使用

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')
  );

var FooterMenu=React.createClass({
onClick：函数（类型）{
var含量；
开关（类型）{
案例“A”：
内容=Etiam feugiat lorem non metus.nullas sit amet est.Vivamus aliquet elit ac nisl.present egestas tristique nibh.Morbi nec metus。
在turpis的lacus ac velit ornare lobortis.的Morbi前庭蜗壳。Perlentesque posuere。Curabitur。Donec posuere vulputate arcu。Donec posuere vulputate arcu。Donec posuere vulputate arcu。Maecenas Maesuada。Ut varius tincidut libero。faucibus orci luctus et ultri的前同侧前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭；
打破
案例“B”：
内容=，mollis sed，Nonumy id，metus.turpis前庭sem，aliquet eget，lobortis Pellentsque，rutrum eu，nisl.Nunc nulla.Donec mollis hendrerit risus.ultricies nis vel augue.在turpis ut velit.连续的turpis中，在posuere.在dui magna，Vivamus aliquet Elite ac nisl.中eget，前庭et，临时拍卖人，ullamcorper mauris，ligula，Vivamus euismod mauris，justo.前庭ullamcorper mauris.；
打破
违约：
抛出新错误（“未实现类型”）；
}
this.props.setActiveContent（content）；
},
渲染：函数（）{
返回(

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')
  );