How to pause the dismount of a component so that the animation will work?

Question

JavaScript

I want to make animated page transitions using a hook, but how can I make the component hide animation work before the component is unmounted.
here is the HOK code:

import React from 'react';

const withFade = (PassedComponent) => {
    return class extends React.Component {
        state = {
            wrapperStyle: {
                transition: 'opacity .2s ease-out',
                opacity: '0'
            }
        }


        unfade = () => this.setState({ wrapperStyle: { ...this.state.wrapperStyle, opacity: '1' } })
        fade = () => this.setState({ wrapperStyle: { ...this.state.wrapperStyle, opacity: '0' } })
        componentDidMount = () => { this.unfade() }
        componentWillUnmount = () => { this.fade() }
        render() {
            return (
                <div style={this.state.wrapperStyle}>
                    <PassedComponent
                        {...this.props}
                    />
                </div>
            )
        }
    }
}
export default withFade

Answer 1

https://github.com/reactjs/react-transition-group

Answer 2

Perhaps the componentWillUnmount() method will suffice

Answer 3

Never stop. You need to do it differently, you must have some condition by which the component is displayed. Let it be some show property. If it is true, then the component appears, if it is false, then it disappears. You will have to create one more property that will be responsible for rendering the component in the DOM, shouldRender. So, depending on the show, substitute the necessary styles for the component, better animation on @keyframes. Further, the animated element can be set onAnimationEnd, and in it, depending on the value of show, set the value for shouldRender, if shouldRender is false, then the component will disappear from the DOM.
Read more here:
https://dev.to/michalczaplinski/super-easy-react-m...

Answer 4

If you expect more animations, then you can use special libraries for React. I use Framer Motion, by the way, your task is solved within the framework of the functionality of the same module.