cssreactjscss-transitionscss-transformsreact-class-based-component

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.

Solution

  • 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.