Next."exit"를 실행하지 않고 js+Framer Motion에서 페이지 마이그레이션 애니메이션을 실행하려면 다음과 같이 하십시오.

문장의 개념

이 글은 "Framer Motion으로 페이지가 이동하는 애니메이션을 만들고 싶지만 exit의 처리가 움직이지 않습니다!"어려운 사람들을 겨냥한 기사다.
쌓여 넘치는 것도 같은 고민거리였지만, 해결된 기사는 보이지 않았다.
같은 고민을 하는 사람을 돕기 위해 메모로 남긴다.

결론

NEXT 이외의 Link 어셈블리를 사용했기 때문입니다.

그렇게 지도 모른다, 아마, 아마...

개발 환경

Next.js

TypeScript

MUI

Framer Motion

날과 씨

Next.Framer Motion 을 사용하여 js 페이지를 마이그레이션할 때 페이드 → 페이드 애니메이션을 만들고 싶습니다.
그리하여참고로 실시해 보았습니다.

// _app.tsx
import { AnimatePresence } from "framer-motion";

const MyApp = ({ Component, pageProps, router }: AppProps) => (
    <AnimatePresence exitBeforeEnter>
        <Component key={router.asPath} {...pageProps} />
    </AnimatePresence>
);

export default MyApp;

// レイアウト用のファイル
export default function Layout(props: Props) {
    return (
        <ThemeProvider theme={theme}>
            <CssBaseline />
            <Header />
	    // ヘッダー直下に配置
            <motion.div
                    initial={{ opacity: 0, y: 10 }} // 初期状態
                    animate={{ opacity: 1, y: 0 }} // マウント時
                    exit={{ opacity: 0, y: 10 }} // アンマウント時
                    transition={{
                    duration: 0.5,
                    }}
            >
                <Container>
                    {props.children}
                </Container>
            </motion.div>
        </ThemeProvider>
    );
}

이렇게 하면 페이지를 넘길 때마다 0.5초 동안 아래로 담금질한 다음 가볍게 담금질해야 한다.
기뻐 날뛰다.
하지만, 나는 그곳에서 반했다.
exit는 동작하지 않습니다.
페이지가 이동할 때, "initial"animate "는 의도대로 동작하고, 아래에서부터fu로 표시됩니다.
그러나 'exit' 애니메이션이 작동하는 것을 볼 수 없습니다.
갑자기 사라져 보들보들해진 것이다.
왜?
기술 장소를 바꿔 공식 페이지와 영어 기사를 읽으면서 다양한 모색을 해보자.
그리고 약 한 시간 후에 마침내 원인을 찾았다.

원인을 고찰하다

나의 상황

MCI의 Link 어셈블리를 사용했기 때문입니다.

네.
우연히 넥스트.js 링크 구성 요소를 시도했습니다.
상상했던 대로 서서히 사라지고 서서히 나오는 애니메이션이 구현됐다.
기적?
MUI의 링크 구성 요소는 아이콘 등 쉽게 설정할 수 있다는 이유로 사용하지만,'Framer Motion'과는 맞지 않는 것 같다.
나는 이것이 exit가 뛰지 않는 모든 원인인지 모르겠다. 어쨌든 나의 애니메이션이 움직였다.

후기

앞으로는 넥스트.js의 링크 구성 요소를 사용하기로 결정합니다.😅
또한 다른 이름이 같은 어셈블리가 있으면 Next를 사용합니다.나는 js가 제공한 물건을 우선적으로 사용하고 싶다.
만약 의외의 행동을 했다면, 반드시 구성 요소의 출처를 바꾸어 보십시오.