Barba.js обеспечивает плавный и плавный переход между страницами веб-сайта и за короткий период времени заработал хорошую репутацию на рынке, имея более 8 тысяч обращений к исходному коду. Тем не менее, сложная часть - интегрировать его с современными фреймворками. Как мы все знаем, в современном мире повальное увлечение SPA с использованием таких фреймворков, как React / Vue, только усилилось. Дизайн состоит из одной страницы с использованием React / Vue, работает плавно и обеспечивает естественное ощущение с более высоким UX. SPA, созданный с помощью этих фреймворков, может обеспечивать всевозможные виды виртуальной маршрутизации без изменения структуры HTML, но при этом переупорядочивает компоненты. Достижение эффекта перехода между изменением маршрута в React очень интересно, поскольку мы можем использовать хуки жизненного цикла для получения того же эффекта, что и Barba.js, без использования пакета.
В этой статье разработано одностраничное приложение React, в котором маршрутизация достигается с помощью «реактивного маршрутизатора», а переходы производятся с помощью «GSAP». Приложение создано с использованием настройки create-response-app, в которой установлены дополнительные несоответствия, например, response-router и GSAP. Простая структура папок выглядит так, как показано в приведенном ниже фрагменте, где присутствуют два компонента без сохранения состояния, Контакт и Домашняя страница, которыми управляет App.js.
App.js - Home Component (Route= "/") - Contact Component (Route= "/contact")
Эти компоненты не имеют состояния, что позволяет использовать два критических перехватчика (useRef / useEffect) для анимации при монтировании и удалении компонента. Типичная структура HTML для каждого компонента состоит из первого уровня, то есть экрана загрузки, и всех дочерних компонентов / структуры HTML в качестве второго уровня. Таким образом, при входе в компонент с помощью хука useEffect экран загрузки будет анимирован с помощью шкалы времени GSAP, а оператор return в useEffect будет полезен, чтобы предоставить нам улучшенные возможности анимации при отключении компонента из дерева DOM.
Ниже приведены простые шаги для создания перехода:
- Добавьте ссылки на элементы HTML, которые будут переходить.
- Настройте временную шкалу в хук useEffect для перехода.
- Обратный вызов useEffect будет воспроизводить переход, который будет действовать, пока компонент удаляется.
Временная шкала GSAP для скользящего эффекта
Timeline - это мощный класс, обеспечивающий все функции настройки последовательной анимации для нескольких элементов. Здесь, используя временную шкалу, скользящую анимацию можно получить с помощью последовательного выполнения ниже 4 шагов.
- Шаг A: Изначально ширина экрана загрузки установлена на 0 в CSS, который будет изменен на 100% за 1 секунду, таким образом, создается эффект закрытия занавеса.
- Шаг B: после этого задержка в 0,3 секунды для обеспечения остановки для создания эффекта закрытой шторки.
- Шаг C: запускается следующая анимация, и на том же экране слева на 100% отображается
- эффект открытия штор. В конце анимации левое значение экрана устанавливается на некоторое отрицательное значение% для большей безопасности.
- Шаг D: одновременно, Tweenmax также реализуется с задержкой в 2 секунды от начальной точки для отображения основной части компонента с эффектом постепенного появления, наряду с этим он активирует события указателя на в то же время, чтобы уменьшить перекрытие.
Уничтожая компонент, используя функцию обратного вызова useEffect, он отменяет непрозрачность и удаляет события-указатели.
Нет больше теории, давайте код :)
Примечание. Чтобы реализовать этот переход в компонентах с отслеживанием состояния, вся установка должна соответствовать двум методам жизненного цикла, а именно componentDidMount и componentWillUnmount..
Вы можете запустить предоставленное демонстрационное приложение или попытаться реализовать его с вашим текущим приложением React для более плавного взаимодействия с пользователем. Не стесняйтесь связываться со мной в социальных сетях, я всегда с нетерпением жду отзывов.
Спасибо за чтение и удачного кодирования !!!
