Using useTransition with conditional rendering

[nfuaufagf]

I'm trying to make a fade through transition effect between pages in my component. However, the code below doesn't seem to work. How can this be fixed?

    function Component() {
        const [page, setPage] = useState(1);

        const transitions = useTransition(page, {
            from: { opacity: 0, transform: "scale(92%)" },
            enter: { opacity: 1, transform: "scale(100%)" },
            leave: { opacity: 0, transform: "scale(100%)" }
        })

        return transitions(() => (
            <animated.div>

                {page === 1 && <h1>Page one</h1>}
                {page === 2 && <h1>Page two</h1>}
    
            </animated.div>
        ))
    }

Also, it'd be ideal if going from page 1 to 2 would make page 2 scale up, but when going from page 2 to 1 it would make page 1 scale down. Would useSprings be more ideal in this case?

[ihtisham1211]

I am also looking for the same solution.

[Emiliano-Bucci]

@nfuaufagf I think you need to pass the styles to the <animated.div />, like this:

 function Component() {
        const [page, setPage] = useState(1);

        const transitions = useTransition(page, {
            from: { opacity: 0, transform: "scale(92%)" },
            enter: { opacity: 1, transform: "scale(100%)" },
            leave: { opacity: 0, transform: "scale(100%)" }
        })

        return transitions((styles, item) => (
            <animated.div style={styles}>
                {item === 1 && <h1>Page one</h1>}
                {item === 2 && <h1>Page two</h1>}
            </animated.div>
        ))
    }

[joshuaellis]

Isn't this what you're looking for? https://codesandbox.io/s/github/pmndrs/react-spring/tree/master/demo/src/sandboxes/simple-transition