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效果到$hours = Hour::with('order.customer')->get();。

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

setState()

jsfiddle

更好的一个是

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

jsfiddle

使用React JS的FadeIn和FadeOut效果

1 个答案: