使用React JS的FadeIn和FadeOut效果

Question

我有这样的事情:

var Hello = React.createClass({
    getInitialState: function(){
    return {
        opacity: 0
    }
  },

  handleClick: function(event){
    event.preventDefault();
    this.setState({opacity: 1});
  },

  render: function() {
    return <div>
        <div style={{opacity: this.state.opacity, transition: "opacity 1s"}}>Test</div>
      <a href="" onClick={this.handleClick}>Click</a>
    </div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

这是 jsfiddle

我希望内部文本测试的div不显示在页面加载上.然后,如果我点击该div显示的链接.这就是这个例子的作用.

但是我希望在点击后显示div之后,几秒钟后它会再次消失.(我需要以某种方式将不透明度再次设置为0).

有什么建议？

Answer 1

您可以添加通过回调函数的FadeOut效果setState().

一个简单的解决方案看起来像这样

handleClick: function(event){
    event.preventDefault();
    this.setState({opacity: 1}, () => setTimeout(() => this.setState({opacity:0}),4000)); 
},

的jsfiddle

一个更好的是

handleClick: function(event){
    event.preventDefault();
    this.setState({opacity: 1}, () => {
        if(!this.timeout)
            clearTimeout(this.timeout);
        this.timeout = setTimeout(() => this.setState({opacity:0}),4000);
 });

的jsfiddle