使用React JS实现淡入和淡出效果

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

我希望页面加载时不显示带有文本"test"的div元素。然后，当我点击链接时，该div元素显示出来。这就是这个例子所做的事情。

但我希望在点击后几秒钟后，该div元素再次消失（需要将其不透明度设置为0）。

有什么建议吗？

- Boky

Answer 1

您可以通过将回调函数传递给 setState() 来添加 FadeOut 效果。

一个简单的解决方案如下所示。

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

- QoP

---

这在IE11中似乎不起作用，谷歌说它无法处理箭头函数（=>），但转换它们仍然失败，因为对象仍然没有透明度。 - behelit