The .page-transition-exit and .page-transition-exit-active class are not applied when unmounting a page

`import React from 'react'; import App from 'next/app'; import {useRouter} from 'next/router'; import { PageTransition } from 'next-page-transitions' import { Provider } from 'react-redux'; import { initializeStore } from './store' import {MainLayout} from "../components/layouts/MainLayout"; import {fetchApi} from "../services/fetchApi"; import {Div100Vh} from "../components/Div100Vh";

import '../sass/styles.scss';

const TIMEOUT = 2000;

export const withRedux = ( PageComponent, { ssr = true, Layout = MainLayout, fetchURLLayout = '/layouts', classes = []} = {}) => {

const WithRedux = ({ initialReduxState, ...props }) => {
    const router = useRouter();

    const store = getOrInitializeStore(initialReduxState);

    return (
        <Provider store={store}>
            <PageTransition
                timeout={TIMEOUT}
                classNames='page-transition'
            >

                <Layout {...props.data} className={classes.join(' ')} key={router.route}>
                    <Div100Vh>
                        <PageComponent key={router.route} {...props}/>
                    </Div100Vh>
                </Layout>

            </PageTransition>
        </Provider>
    )
};

if (process.env.NODE_ENV !== 'production') {
    const isAppHoc =
        PageComponent === App || PageComponent.prototype instanceof App;
    if (isAppHoc) {
        throw new Error('The withRedux HOC only works with PageComponents')
    }
}

if (process.env.NODE_ENV !== 'production') {
    const displayName =
        PageComponent.displayName || PageComponent.name || 'Component';

    WithRedux.displayName = `withRedux(${displayName})`
}

if (ssr || PageComponent.getInitialProps) {
    WithRedux.getInitialProps = async context => {
        const reduxStore = getOrInitializeStore();

        context.reduxStore = reduxStore;

        let pageProps =
            typeof PageComponent.getInitialProps === 'function'
                ? await PageComponent.getInitialProps(context)
                : {};

        if (fetchURLLayout) {
            return fetchApi(`${fetchURLLayout}`).then(res => ({
                    ...pageProps,
                    data: res,
                    initialReduxState: reduxStore.getState()
                })
            );
        } else {
            return {
                ...pageProps,
                initialReduxState: reduxStore.getState()
            }
        }
    }
}

return WithRedux

};

let reduxStore;

const getOrInitializeStore = initialState => { if (typeof window === 'undefined') { return initializeStore(initialState) }

if (!reduxStore) {
    reduxStore = initializeStore(initialState)
}

return reduxStore

};`

css `$animation-duration: 2000ms;

@media screen and (min-width: 320px) { .page-transition-enter { opacity: 0; transform: translate3d(0, 100px, 0); } .page-transition-enter-active { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity $animation-duration, transform $animation-duration; } .page-transition-exit { opacity: 1; } .page-transition-exit-active { opacity: 0; transition: opacity $animation-duration; } .loading-indicator-appear, .loading-indicator-enter { opacity: 0; } .loading-indicator-appear-active, .loading-indicator-enter-active { opacity: 1; transition: opacity $animation-duration; } }`

illinois / next-page-transitions

The .page-transition-exit and .page-transition-exit-active class are not applied when unmounting a page #45