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