CODEWITHSUNDEEP
javascriptcss
Boky
Boky

Reputation: 12054

FadeIn and FadeOut effect using React JS

I have something like this :

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

Here is jsfiddle

I want that div with text test within doesn't shows up on page load. Then if I click on the link that that div shows up. That is what this example do.

But I want that after the div shows up after the click, a few seconds later it disappears again. (I need somehow set opacity to 0 again).

Any advice?

Upvotes: 4

Views: 6033

Answers (1)

QoP
QoP

Reputation: 28397

You can add the FadeOut effect passing a callback function to setState().

A simple solution would look like this

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

jsfiddle

A better one would be

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

jsfiddle

Upvotes: 5

Related Questions