CODEWITHSUNDEEP
cssreactjscss-transitionscss-transformsreact-class-based-component
Edwin Varghese
Edwin Varghese

Reputation: 493

How to use setState after a css transition ends in React JS?

//sample piece of codes

constructor() {
    super()
  this.state.opacity= '0'
  this.state.mover = 'translateY(-40%)'
 }


this.setState({opacity:'1'})
this.setState({mover: 'translateY(-900%)'}, () => {this.setState({opacity:'0'})})

when I click on a button, I want a div to appear (using opacity 1) and transition to top and fade out after reaching the top(using opacity 0).

But it didn't work the way I expected. Currently, it fades out instantly. It doesn't wait for the transition to end. I want it to fade out after the transition ends.

Is there a way in React to fix it ? I am very new in react. Help is much appreciated. Thanks.

Upvotes: 2

Views: 1642

Answers (2)

Norbert Biró
Norbert Biró

Reputation: 710

How about using transitionend event listener?

yourDivElement.addEventListener('transitionEnd', (event) => { 
   this.setState({ yourProp: "your-new-value" })
}, false );

Annoyingly enough, you may need to add different event names for cross browser compatibility:

["transitionend", "webkitTransitionEnd", "mozTransitionEnd"].forEach((eventName) => {
    yourDivElement.addEventListener(eventName, (event) => { 
       this.setState({ yourProp: "your-new-value" })
    }, false );
})

Make sure you refer to the DOM element using ref.

Browser compatibility Source

Upvotes: 0

Edwin Varghese
Edwin Varghese

Reputation: 493

Found an easy workaround for this. I am not sure if this is the right way, but it works.

constructor() {
super()
this.state.opacity= '0'
this.state.mover = 'translateY(-40%)'
}


this.setState({opacity:'1'})
this.setState({mover: 'translateY(-900%)'}, () => {
               setTimeout(() => { this.setState({ opacity: '0' })}, 1000);
               })

Inside the call back function, I setup a settimeout function. The event inside the settimeout function will be triggered after xxx milliseconds. So basically you will have to calculate the duration of your previous transition and set the time accordingly.

Upvotes: 2

Related Questions