Boky Boky - 3 months ago 30
CSS Question

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?

QoP QoP
Answer

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

Comments