Переходы имеют множество преимуществ для пользователей, в том числе помогают сохранять контекст и уменьшают ощущение задержки. Разработчики стремятся к возможности создавать плавные переходы между страницами, что способствует повышению вовлеченности пользователей в работу с их сайтом.
Однако реализация переходов между состояниями оказалась очень сложной задачей, поскольку требовала от разработчиков управления состояниями двух разных элементов. Даже такой простой эффект, как кроссфейд, предполагает одновременное присутствие обоих состояний. Это создает проблемы с удобством использования, например, обработку дополнительного взаимодействия с исходящим элементом. Для пользователей вспомогательных устройств существует период, когда и состояние «до», и состояние «после» присутствуют в DOM одновременно. Кроме того, элементы могут перемещаться по дереву таким образом, что это визуально приемлемо, но может легко привести к потере позиции чтения и фокуса.
API View Transitions, появившийся в Chrome 111, позволяет создавать плавные и простые переходы между страницами. Он позволяет изменять DOM без наложения состояний и создавать анимацию перехода между состояниями с использованием снимков состояния.
Возможно, вас заинтересует вопрос: насколько легко это реализовать? Какие существуют варианты использования? Как другие разработчики используют переходы между представлениями?
В этой статье рассматривается реализация переходов между представлениями на 4 различных веб-сайтах: RedBus (путешествия), CyberAgent (издание новостей/блогов), Nykaa (электронная коммерция) и PolicyBazaar (страхование), а также то, как использование API переходов между представлениями принесло пользу этим сайтам по-разному.
красный автобус
redBus, входящий в группу MakeMyTrip, — это веб-сайт по бронированию и продаже автобусных билетов со штаб-квартирой в Бангалоре, Индия, и представительствами в различных регионах мира. Это был один из первых веб-сайтов, внедривших интерфейс с использованием API View Transitions.
Зачем компания Redbus внедрила переходы между представлениями?
Команда redBus твердо убеждена в необходимости предоставления единого, похожего на приложение, веб-интерфейса, максимально приближенного к их нативным приложениям. Фактически, за эти годы они внедрили множество собственных решений. Например, они использовали пользовательские анимации на основе JavaScript и CSS для переходов между страницами еще до разработки API View Transitions. Однако это означало необходимость решения проблем с управлением производительностью в сегментах сетей и устройств с низкой пропускной способностью, что иногда приводило к различиям в пользовательском опыте при использовании адаптивной стратегии загрузки .
Компания redBus использовала переходы между страницами для различных вариантов взаимодействия пользователей. Например, в разделе самообслуживания своего мобильного приложения, где веб-страницы открывались в пользовательских вкладках Chrome, и в процессе бронирования автобусных билетов, где пользователи переходят со страницы со списком доступных билетов на страницу оплаты. В последнем случае переходы между страницами сделали навигацию более плавной и привели к увеличению коэффициента конверсии. Это стало результатом улучшения пользовательского опыта и повышения воспринимаемой производительности при выполнении ресурсоемких операций, таких как получение самой актуальной информации о доступных билетах.
Технические детали реализации
redBus использует React и EJS в качестве фронтенд-технологий, сочетая одностраничные приложения (SPA) и многопользовательские приложения (MPA) в различных сценариях взаимодействия. Следующий фрагмент кода демонстрирует использование переходов между представлениями:
/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
if(document.startViewTransition) {
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
})
} else {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
}
};
/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
if(document.startViewTransition) {
document.documentElement.classList.add('back-transition');
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.goBack() : history.back();
})
viewTransition.finished.finally(() => {
document.documentElement.classList.remove('back-transition');
})
} else {
reactHistory ? reactHistory.goBack() : history.back();
}
};
В приведенном ниже CSS-коде slide-to-right , slide-to-left , slide-from-right и slide-from-left являются ключевыми кадрами CSS-анимации.
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}
Влияние на бизнес
Компания redBus решила внедрить анимацию перехода между экранами в рамках мер по улучшению INP на своем сайте, что привело к увеличению продаж на 7% . Амит Кумар , старший инженер-менеджер redBus, отметил, что анимация перехода между экранами действительно полезна для тех, кто хочет улучшить пользовательский опыт и снизить затраты на обслуживание.
Мы провели всесторонние сессии по сбору отзывов пользователей, включив в них ценные сведения от самых разных пользователей. Глубокое понимание нашей пользовательской базы (автобусы и поезда) и их потребностей, в сочетании с нашим опытом, позволило нам убедиться, что эта функция принесет значительную пользу с самого начала, без необходимости A/B-тестирования. Переходы между экранами — это шаг к созданию плавной навигации между приложением и веб-версией.
Ануп Менон, технический директор redBus
Киберагент
CyberAgent — это японская IT-компания, предоставляющая множество онлайн-услуг, включая ведение блогов и публикацию новостей.
Зачем компания CyberAgent внедрила переходы между изображениями?
В прошлом компания CyberAgent рассматривала возможность использования CSS-анимаций или фреймворков для реализации анимированных переходов с целью улучшения пользовательского опыта, но их беспокоила низкая производительность при рендеринге DOM и сложность сопровождения кода. Когда Chrome добавил поддержку API View transitions, они с энтузиазмом восприняли возможность использовать его для создания привлекательных переходов между страницами, которые позволили преодолеть эти проблемы.
Компания CyberAgent реализовала эффект перехода между списком статей блога и страницей блога. Обратите внимание, как они добавили этот эффект к главному изображению. Вы можете посетить их сайт и убедиться в этом сами уже сегодня.
Они также использовали медиа-запросы для создания различных анимационных эффектов для разных устройств. Для мобильных страниц они включили переходы между элементами, но для настольных компьютеров этот эффект давал слишком много движения.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Технические детали реализации
Компания CyberAgent использует Next.js для создания своего одностраничного приложения (SPA). Следующий пример кода демонстрирует, как они используют API перехода между представлениями (View Transition API).
export const usePageTransition = () => {
const router = useRouter();
const defferedRef = useRef<Deferred | null>(null);
useEffect(() => {
const handleRouteChangeComplete = () => {
defferedRef.current?.resolve();
};
const handleRouteChangeStart = (url: string) => {
if (!("startViewTransition" in document)) return;
if (router.asPath === url) return;
const deffered = new Deferred();
defferedRef.current = deffered;
(document as Document).startViewTransition(async () => {
await deffered.promise;
});
};
router.events.on("routeChangeStart", handleRouteChangeStart);
router.events.on("routeChangeComplete", handleRouteChangeComplete);
return () => {
router.events.off("routeChangeStart", handleRouteChangeStart);
router.events.off("routeChangeComplete", handleRouteChangeComplete);
};
}, [router.asPath]);
};
Посмотрите еще несколько примеров кода Next.js.
Просмотр переходов для MPA с использованием технологии предварительной отрисовки
Компания CyberAgent также протестировала наш новый API для перехода между страницами (View Transitions API) для многостраничных приложений (MPA) (в настоящее время доступен по флагу chrome://flags/#view-transition-on-navigation ) на сервисе Ameba News , который представляет собой новостной портал.
Переходы между сценами использовались в двух местах: первый — при смене категорий новостей, как показано в следующем видео.
Второй вариант — это переход от страницы с основными новостями, где отображается отрывок из статьи, к моменту, когда пользователь нажимает кнопку «Подробнее» , и остальная часть статьи плавно появляется.
Интересно то, что анимацию добавили только к той части, которая изменится после нажатия кнопки. Эта небольшая корректировка дизайна анимации делает страницу MPA более похожей на SPA с точки зрения пользователя, где анимируется только новый контент:
Вот как они это сделали: они присвоили разным частям страницы разные view-transition-name . Например, они присвоили одно view-transition-name верхней части статьи, другое — нижней, и не добавили анимацию к верхней части.
::view-transition-old(root) {
animation:
var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
}
::view-transition-new(root) {
animation:
var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}
Ещё один интересный момент в использовании API переходов между представлениями в CyberAgent заключается в том, что они использовали quicklink для простой реализации правил предварительной отрисовки на странице с подробной информацией. Вот пример их кода:
import { prerender } from ‘https://.../quicklink.mjs’;
window.addEventListener('load', () => {
const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
if (!match) return;
const [_, dirname, entryId] = match;
prerender(`/${dirname}/${entryId}/`);
});
Подробнее о реализации функции быстрых ссылок вы можете прочитать в этой статье .
Отзыв
Казунари Хара, технический руководитель сервиса Ameba в CyberAgent, заявил, что изменения в представлении данных могут оказать существенное влияние на бизнес по двум причинам.
Во-первых, они направляют пользователей по странице. Переходы между изображениями позволяют визуально сфокусировать внимание пользователей на самом важном сообщении и помогают им получить максимальную пользу от веб-страницы. Кроме того, они усиливают и подчеркивают бренд с помощью анимации. У CyberAgent есть собственный дизайн анимации для передачи своего бренда. Благодаря переходам между изображениями они могут реализовать этот фирменный стиль без дополнительных затрат на поддержку внешних библиотек.
View Transitions — один из моих любимых API. Возможность добавлять анимацию как стандартную функцию браузера упрощает реализацию и поддержку переходов между представлениями по сравнению с другими решениями, зависящими от библиотек. Мы с нетерпением ждём внедрения переходов между представлениями в большее количество сервисов для продвижения нашего бренда.
Казунари Хара, технический директор Ameba
Nykaa
Nykaa — крупнейшая в Индии платформа электронной коммерции в сфере моды и красоты. Их цель — сделать мобильную версию сайта максимально приближенной к функционалу нативного приложения. Ранее при попытке реализовать анимацию переходов они сталкивались с трудностями из-за необходимости написания сложного пользовательского JavaScript-кода. Это также незначительно влияло на производительность сайта.
Зачем Nykaa внедрила анимацию перехода между изображениями?
С появлением анимационных переходов команда Nykaa увидела возможность значительно улучшить пользовательский опыт переходов между страницами без ущерба для производительности. Nykaa активно использует анимационные переходы для перехода со страницы с подробным описанием товара на страницу со списком товаров.
Технические детали реализации
Компания Nykaa использовала React и Emotion для создания своего одностраничного приложения (SPA). Больше примеров кода, демонстрирующих использование переходов между представлениями (View Transitions) в React, можно найти здесь .
if (document.startViewTransition) {
document.startViewTransition(() => {
history.push(productUrl);
});
} else {
history.push(productUrl);
}
const fadeIn = keyframes`
from { opacity: 0; }
`;
const fadeOut = keyframes`
to { opacity: 0; }
`;
const slideFromRight = keyframes`
from { transform: translateX(300px); }
`;
const slideToLeft = keyframes`
to { transform: translateX(-300px); }
`;
const slideToRight = keyframes`
to { transform: translateX(300px); }
`;
const slideFromLeft = keyframes`
from { transform: translateX(-300px); }
`
CSS для анимации боковой выдвижной панели:
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}
::view-transition-new(root) {
animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}
.back-transition {
display: inherit;
}
.back-transition::view-transition-old(root) {
animation-name: fade-out, ${slideToRight};
}
.back-transition::view-transition-new(root) {
animation-name: fade-in, ${slideFromLeft};
}
Отзыв
Сунит Джиндал , руководитель отдела приложений в Nykaa, заявил, что самым большим преимуществом переходов между экранами является «ощущение скорости». Nykaa использовала эффекты мерцания , чтобы дождаться загрузки контента из бэкэнда, но обнаружила, что демонстрация эффекта мерцания не давала пользователям представления о том, сколько времени им придется ждать загрузки контента. При использовании переходов между экранами сам переход создавал у пользователей ощущение, что «что-то вот-вот произойдет», что делало ожидание менее мучительным.
Компания Nykaa была очень рада улучшенному пользовательскому интерфейсу своей веб-страницы с анимацией перехода между страницами и готова внедрить эту функцию и на других страницах. Вот что сказал вице-президент по дизайну:
Мы намерены внедрить плавные переходы между окнами во всех будущих функциях там, где это целесообразно. Некоторые области уже определены, и команда активно работает над их развитием.
Кришна Р.В., вице-президент по дизайну.
PolicyBazaar
Компания PolicyBazaar со штаб-квартирой в Гургаоне является крупнейшим в Индии агрегатором страховых услуг и многонациональной финансово-технологической компанией.
Зачем PolicyBazaar внедрила переходы между представлениями?
Будучи компанией, ориентированной в первую очередь на веб-разработку, команда PolicyBazaar всегда стремилась обеспечить наилучший пользовательский опыт на всех ключевых этапах взаимодействия с пользователем. Внедрение пользовательских переходов с использованием JavaScript и CSS было распространенной практикой еще до запуска API View Transitions, поскольку это улучшало пользовательский опыт, создавало плавный поток навигации и повышало общую визуальную привлекательность веб-сайтов.
Однако эти пользовательские реализации сопровождались периодическими задержками, связанными с производительностью, сложностями в сопровождении кода и неоптимальной совместимостью с используемыми фреймворками. API переходов между представлениями помог им преодолеть большинство этих проблем, предоставив простой в использовании интерфейс с преимуществами в производительности, доступными нативно.
Компания PolicyBazaar использовала переходы между различными элементами на этапе предварительного расчета стоимости полиса, чтобы заинтересовать потенциальных покупателей в предоставлении необходимой информации для приобретения страховых полисов.
Технические детали реализации
Они используют гибридный подход к разработке, где большая часть кода состоит из Angular и React. Вот фрагмент кода, написанного на Angular и предоставленного Аманом Сони (ведущим фронтенд-разработчиком PolicyBazaar):
toggleWidgetAnimation() {
let doc:any = document;
if (!doc.startViewTransition) {
this.toggleWidget();
return;
}
doc.startViewTransition(() => this.toggleWidget());
}
toggleWidget() {
let badgeEle = document.querySelector('.animate_init_state_one');
let textEle = document.querySelector('.animate_init_state_two');
badgeEle.classList.toggle('hide');
textEle.classList.toggle('hide');
}
Отзыв
Ришаб Мехротра, руководитель отдела дизайна (подразделение «Жизнь»), отметил, что переходы между экранами играют важную роль в улучшении пользовательского опыта на сайте, повышая удобство использования, вовлеченность и общую удовлетворенность. Это помогает обеспечить плавную навигацию, управляемое взаимодействие, снизить когнитивную нагрузку, современную эстетику и многое другое.
Улучшение пользовательского опыта в интернете является первостепенной задачей для PB, и VT доказал свою эффективность в достижении этой цели, обеспечивая замечательную плавность работы. Его широкая популярность как среди нашего сообщества разработчиков, так и среди пользователей вселила в нашу команду чувство энтузиазма. Рассматривая его интеграцию в различные POD-платформы, мы ожидаем значительного положительного влияния на уровень удовлетворенности и операционную эффективность.
Саурабх Тивари (технический директор PolicyBazaar)
Следующие шаги
Хотите попробовать использовать эффекты перехода между окнами? Вот несколько ресурсов, которые помогут вам узнать больше: