What is the best way to have different transitions based on the app state?

Say that I have two pages PageA and PageB.

I want to transition between PageA -> PageB using TransitionX.

But when I’m navigating between PageB -> PageA I want to use TransitionY.

Is this easily achieved with this package or is it best to use a more custom solution? (React Spring or similar)

[kapoko]

I just found a solution for this. In my case I had pages that were dark themed and some that were light themed so I wanted use different transitions based on what page the user navigated to. I use pageProps for this. Here’s the simplified code:

// pages/index.js

const Index = props => (
    <h1>Index page</h1>
)

Index.getInitialProps = async function () {
    return { theme: 'light' }
}

export default Index

// pages/about.js

const About = props => (
    <h1>About page</h1>
)

About.getInitialProps = async function () {
    return { theme: 'dark' }
}

export default About

Then in _app.js we can fetch the theme prop and pass it to the PageTransition’s component classNames prop.

// pages/_app.js

class MyApp extends App {
    render() {
        const { Component, pageProps } = this.props;

        return (
            <Container>
                <PageTransition timeout={1000} classNames={`transition-${pageProps.theme}`}>
                   <Component {...pageProps} />
                </PageTransition>
            </Container>
        )
    }
}
export default MyApp

Now I can use the classes transition-light-enter transition-light-enter-active transition-light-enter-done transition-dark-enter transition-dark-enter-active transition-dark-enter-done etc. etc. to style the different transitions.

[kapoko]

Sure thing. Called the example multiple-transitions to make it as general as possible.

https://github.com/illinois/next-page-transitions/pull/39