javascript - 使用 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