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

Question

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

I think the only way to solve this issue is using 'react-transition-group'. I have to do a POC to confirm though. reactcommunity.org/react-transition-group — Edwin Varghese
– Edwin Varghese, Commented Aug 13, 2021 at 12:39

Edwin Varghese · Accepted Answer · 2021-09-08 03:32:07Z

2

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.

answered Sep 8, 2021 at 3:32

Edwin Varghese

4931 gold badge6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AshotN Over a year ago

This is definitely not the right way... in general you shouldn't be hard-coding setTimeouts like that. It's not really a big deal in this context, but I'd also consider using CSS animations.

Norbert Biró · Accepted Answer · 2022-12-09 06:03:55Z

0

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

edited Dec 9, 2022 at 6:03

answered Dec 8, 2022 at 15:58

Norbert Biró

7309 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related