Автор оригинала: FreeCodeCamp Community Member.
Дмитрий Ивашчук
Я полностью наслаждаюсь GATSBY по разным причинам, и в этом посте я хочу поделиться, насколько легко добавить настраиваемые переходы страницы на ваш сайт, чтобы сделать его больше оживленно и гладкий.
Мы будем использовать GATSBY Starter по умолчанию, чтобы сделать этот пример как можно более изолированные, но вы можете быть уверены, что он также будет работать для более сложных начала и проектов, созданных вами с нуля.
Как тизер, мы построим что-то похожее на то, что вы видите, когда вы следуете ссылкам на этом сайте. ?
Начало работы? ️
Если вы новичок в GATSBY и хотите следить с этим учебным пособием, обязательно установите интерфейс командной строки GATSBY ( GATSBY CLI ), чтобы вы могли быстро загрузить новые проекты в будущем.
NPM установить –глобал GATSBY-CLI
Перейдите к папке вашего проекта и создайте новый проект GATSBY внутри него, запустив следующую команду в терминале:
GATSBY новый.
Он создаст проект с простейшей возможной настройкой, и он должен выглядеть так: (он может варьироваться в зависимости от дальнейших итераций на дизайн стартера)
Установка необходимых зависимостей ⚙️
Прежде всего, нам нужно установить React-Praction-Group который несет ответственность за наблюдение за элементами, входящими и выходя из домо, и нанесение им анимации.
NPM установить React-Praction-Group
Мы также установим GATSBY-плагин-макет Что в нашем случае предоставляет свойство расположения, необходимое для переходов для работы и впрыскивает нашу макет на каждую страницу.
NPM установить GATSBY-плагин-макет
Чтобы установить работу плагина, как и ожидалось, нам нужно переместить наш компонент макета в папку макетов в корне нашего проекта и переименовать его на index.js Отказ Давайте также добавим Переход. Джей в папку наших компонентов, где мы предоставим всю логику перехода. Теперь оставьте его пустым, так как у нас есть немного больше, чтобы настроить.
Последний шаг добавляет наши GATSBY-плагин-макет нашему gatsby-config.js Файл, который находится в корне нашего проекта
Компонент перехода?
Это содержит полную логику для перехода, которая будет применяться, когда пользователь решит последовать ссылку на другую страницу на нашем сайте.
Внутри Переход. Джей Добавьте следующий код, который я объясню в комментариях:
Теперь мы можем импортировать Переход Компонент в компонент макета и обернуть детей, которые представляют наши страницы внутри него.
На этом этапе вы можете испытать ошибку, когда некоторые элементы вашей страницы получают дважды. Чтобы решить, просто покончите файлы в Страницы папка и убедиться, что они не импортируют
Теперь, когда все работает, как ожидалось, и вы наслаждаетесь новой добавленной страницей переходами, вы можете заметить небольшую jerky Bug, которая появляется, когда ваша страница прокручивается, и начинается анимация. Обратите внимание, что это происходит, когда на странице больше контента, и вы можете прокрутить.
Мы можем легко исправить это с помощью в том числе следующего кода в нашем gatsby-browser.js Что вы можете найти в корне нашего проекта. Что мы здесь делаем, на самом деле устанавливают время для анимации и ожидания его выполнения до тех пор, пока страница не прокручивается на вершину.
На вашем сайте это должно выглядеть так
Я надеюсь, что вам понравился этот маленький пост и будет использовать ваши новые знания, когда вам это нужно. Здесь вы можете найти Ссылка на github repo С рабочим кодом для этого учебника. Подписаться на я в твиттере Не пропустить следующий пост о GATSBY.JS и забавных вещей, которые вы можете сделать с этим!
Первоначально опубликовано в https://divdev.io Какой BTW использует технику анимации, мы узнали в этом посте!