Change css and state before component unmount Reactjs

Question

I'm new to react and i need to change CSS classes before component unmount but my component recieves new props before unmounting and the css effect doesn't appear any solution please .Thanks in advance

     getNext=()=>{

    this.setState({
        isCardFadeOut: true
    })
    this.secondCard.current.classList.remove('second-card')
    this.secondCard.current.classList.add('main-card')
    this.thirdCard.current.classList.remove('third-card')
    this.thirdCard.current.classList.add('second-card')
    this.props.parent.getNext()

}

What do you exactly want to achieve by changing the css class before unmount? — Muhammad Haseeb, Mar 29 '20 at 07:45
@MuhammadHaseeb kind of animation using pure css so i wanna make the animation part then call getNext from parent :/ without using setTimeOut — Shatha Kt, Mar 29 '20 at 07:47
Do you want to animate any component when your component is about to unmount and any other component is going to mount? Do you want to unmounth smoothly right? — Muhammad Haseeb, Mar 29 '20 at 07:50
You can add the css class before it get mount, but it will be useless because it gets deleted from the DOM so quickly that you will not be able to see the animation. I would recommend to use react-transition-group package for the animation that can be used to animate whenever your state or props changes. I can also create an example of that if you want to use that packege. — Muhammad Haseeb, Mar 29 '20 at 08:18
@MuhammadHaseeb I've seen it but my animation idea is very simple it's all about changing margins that's why i'm using pure css — Shatha Kt, Mar 29 '20 at 08:27
Its not as simple as it looks like but if you want to want to do it with the native events, this should be the answer : https://stackoverflow.com/questions/40064249/react-animate-mount-and-unmount-of-a-single-component — Muhammad Haseeb, Mar 29 '20 at 09:10

score 0 · Answer 1 · answered Mar 29 '20 at 12:29

I used onTransitionEnd event listener to call

this.props.parent.getNext()

and on getNext() i made my css changes which include transition and that makes the function call synced like below:

 <div ref={this.thirdCard} 
      onTransitionEnd={this.handleGetNext} 
      className="content-card third-card"/>


 handleGetNext = () => {
        this.props.parent.getNext()
    }


 getNext = () => {

        this.firstCard.current.classList.add('card-fading')
        this.secondCard.current.classList.remove('second-card')
        this.secondCard.current.classList.add('main-card')
        this.thirdCard.current.classList.remove('third-card')
        this.thirdCard.current.classList.add('second-card')


    }

Change css and state before component unmount Reactjs

1 Answers1