Далее. JS с framer-motion не меняет контент при навигации - PullRequest
Новая
       23

Далее. JS с framer-motion не меняет контент при навигации

1 голос
/ 11 февраля 2020

У меня есть следующая ссылка на моей странице индекса, которая ссылается на мою About Us страницу: 

<Link href="/about"><a>About us</a></Link>

в моем файле _app.js, у меня есть AnimatePresence оболочка: 

<AnimatePresence exitBeforeEnter>
    <Component {...pageProps} key={router.route} />
</AnimatePresence>

Теперь, когда я нажимаю на ссылку About Us, в строке URL-адреса браузера отображается новый маршрут, но содержимое страницы остается индексным.

Но, когда я удаляю оболочку AnimatePresence , он работает нормально (без анимации, конечно).

Почему не работает моя анимация?

1 Ответ

0 голосов
/ 11 февраля 2020

Ах, проблема в том, что мне нужно обернуть свои компоненты оболочкой движения, например: 

<motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
            >
...