Page transitions in React Spring and Next JS - reactjs

Question

So I'm trying to create a simple page transition between pages in next.js using react-spring, however I can't get the unmounting component to fade out. Instead it just snaps out of the screen, while the new one fades in:
The screen then loads itself underneath, I'm really struggling to work out what's going on?
I've tried adding absolute positions to the from and/or the leave keys, but to no avail
//_app.js
import "../styles/globals.css";
import { useTransition, animated } from "react-spring";
import { useRouter } from "next/router";
function MyApp({ Component, pageProps }) {
const router = useRouter();
const transition = useTransition(router, {
key: router.pathname,
from: { opacity: 0},
enter: { opacity: 1 },
leave: { opacity: 0},
config: { duration: 1000 },
// reset:true,
});
return transition((style, item) => {
return (
<animated.div style={style}>
<Component {...pageProps} />
</animated.div>
);
});
}
export default MyApp;
Any help would be great! Thank you

Answer 1

I think the reason this is going wrong for you is that you're using the Component from my app to render, but passing in the useRouter state to the useTransition hook, resulting in them being disconnected.
I got it to work using an additional array:
function MyApp({ Component, pageProps }) {
const router = useRouter();
// initial state
const [compoentArray, setComponentArray] = useState([
<Component key={router.pathname} {...pageProps} />,
]);
const transitions = useTransition(compoentArray, {
from: { opacity: 0 },
enter: [{ opacity: 1 }],
leave: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
opacity: 0,
},
delay: 200,
});
// Updates the array when needed. Avoids rerenders
useEffect(() => {
if (compoentArray[0].key === router.pathname) {
return;
}
setComponentArray([<Component key={router.pathname} {...pageProps} />]);
}, [Component, pageProps, router, compoentArray]);
return (
<div>
{transitions((style, item) => {
// Render items managed by react-spring
return <animated.div style={style}>{item}</animated.div>;
})}
</div>
);
}