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

[newdecline]

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;
}
}`

[lapa182]

Also having the same issue. @newdecline did you manage to solve it?