xavxyz / nextjs-page-transitions

Travel App, Native-like Page Transitions (:atom: with React & Next.js)

Page Transitions Travelapp

Fork

👋, hello there! This repository is a rewrite with React & Next.js of Sarah Drasner's orginal work with Vue & Nuxt.

Live demo: https://page-transitions.now.sh

Original

This demo shows an example of how to achieve native-like page transitions on the web. There's much to be improved here- it's not meant to be a full-fledged web application, just a quick demo to show how this kind of implementation could theoretically work. These concepts can and should be expressed differently in your own application, the sky's the limit here! This is created with Nuxt and Vue.

Article explaining the demo is available at https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web

Live demo at https://page-transitions.com/

See the page transitions travel app demo for a real-life use case: https://github.com/sdras/page-transitions-travelapp

Build Setup

# install dependencies
$ npm install # Or yarn install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm start

For detailed explanation on how things work, checkout the Next.js docs.

nextjs-page-transitions's Issues

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

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

Usage instructions

Would be great to have some instructions on how to use this, demo looks super cool!

Demo is down :(

Demo is down

Live demo is down

Hi!
The demo page is broken (404). Could you make it view-able again?