Как добавить переходы между страницами в Next.js 14 (включая анимацию выхода)
Tom Is Loading
0:00 / 0:00
Как добавить переходы между страницами в Next.js 14 (включая анимацию выхода)
87 084 просмотра · 2 года назад
Tom Is Loading
32,8 тыс. подписчиков
87 084 просмотра · 2 года назад
Анимированные компоненты пользовательского интерфейса для React, Tailwind CSS, Framer Motion и других ✨ https://www.hover.dev
Сегодня мы рассмотрим, как создавать настраиваемые, гибкие переходы между страницами с помощью маршрутизатора приложений NextJS 14. Мы сделаем это без каких-либо сложных трюков с анимацией. Мы напишем код таким образом, чтобы его можно было повторно использовать и развивать, так что каждая из ваших страниц сможет выборочно анимироваться так, как вам нужно (включая полное отсутствие анимации!).
📚 Ссылки на проект
Код: https://github.com/TomIsLoading/next-...
🔗 Мои ссылки
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: https://github.com/TomIsLoading
Twitter: / tomisloading
Discord и другие ресурсы: https://linktr.ee/tomisloading
Шаблоны портфолио: https://tomisloading.gumroad.com/
Веб-сайт: https://www.hover.dev
Таймлайн:
0:00 - Введение
0:23 - Обзор проекта
2:09 - Создание пользовательского компонента ссылки
4:01 - Предотвращение поведения ссылки по умолчанию
6:42 - Добавление нашей анимации