Переходы имеют множество преимуществ для пользователей, в том числе помогают держать их в контексте и уменьшают ощущение задержки. Разработчикам нужна возможность создавать плавные переходы между страницами, помогая повысить взаимодействие пользователей с их сайтом.
Однако обеспечить переходы между состояниями было очень сложно, поскольку разработчикам приходилось управлять состояниями двух разных элементов. Даже что-то вроде простого перекрестного затухания предполагает одновременное присутствие обоих состояний. Это создает проблемы с удобством использования, такие как обработка дополнительного взаимодействия на исходящем элементе. Для пользователей вспомогательных устройств существует период, когда состояние «до» и «после» одновременно находится в DOM. Кроме того, объекты могут перемещаться по дереву таким образом, что это нормально визуально, но может легко привести к потере позиции чтения и фокуса.
API View Transitions, запущенный в Chrome 111, позволяет создавать плавные и простые переходы между страницами. Это позволяет вам изменять DOM без перекрытия между состояниями и иметь анимацию перехода между состояниями с использованием представлений моментальных снимков.
Вы можете задаться вопросом, насколько легко это реализовать? Какие варианты использования существуют? Как другие разработчики используют переходы между представлениями?
В этой статье вы познакомитесь с реализацией переходов представлений на четырех разных веб-сайтах: RedBus (путешествия), CyberAgent (издатель новостей/блогов), Nykaa (электронная коммерция) и PolicyBazaar (страхование), а также о том, как их веб-сайты получили различные преимущества от использования View. API переходов.
красныйавтобус
redBus, входящий в группу MakeMyTrip, — это веб-сайт по бронированию автобусов и продаже билетов со штаб-квартирой в Бангалоре, Индия, с присутствием в разных регионах мира. Это был один из первых веб-сайтов, реализовавших интерфейс View Transitions API.
Почему 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 — японская ИТ-компания, предоставляющая множество онлайн-услуг, включая публикацию блогов и новостей.
Почему CyberAgent реализовал переходы между представлениями?
CyberAgent в прошлом рассматривал возможность использования CSS-анимации или использования платформы для реализации анимированных переходов для улучшения пользовательского опыта, но их беспокоила низкая производительность при рендеринге DOM и удобстве сопровождения кода. Когда Chrome добавил поддержку API переходов View, они были рады использовать его для создания привлекательных переходов страниц, которые позволили бы преодолеть эти проблемы.
В CyberAgent реализован переход между списком блогов и страницей блога. Обратите внимание, как они добавили переход элемента к изображению героя. Вы можете посетить их сайт и испытать это вживую уже сегодня.
Они также использовали медиа-запросы для разработки различных анимаций для разных устройств. Для мобильных страниц они включали переходы элементов, но для настольных компьютеров этот эффект имел слишком много движения.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Технические подробности реализации
CyberAgent использует Next.js для создания своего SPA. В следующем примере кода показано, как они используют 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 для многостраничных приложений (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;
}
Еще одна интересная особенность использования CyberAgent API переходов представлений заключается в том, что они использовали быструю ссылку для простой реализации правил предварительной отрисовки на странице сведений. Вот их пример кода:
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 — крупнейшая в Индии платформа электронной коммерции о моде и красоте. Они стремятся сделать работу в мобильном Интернете как можно ближе к работе в родном приложении. Ранее, пытаясь реализовать анимацию перехода, они сталкивались с трудностями при написании сложного пользовательского JavaScript. Это также незначительно повлияло на производительность их веб-сайта.
Почему Nykaa реализовала переходы между видами?
С появлением переходов просмотра команда Nykaa увидела возможность того, что эти переходы изначально доступны, что означает, что UX переходов страниц может быть значительно улучшен без ущерба для производительности. 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 была очень воодушевлена недавно улучшенным UX своей веб-страницы с переходами между представлениями и готова реализовать переходы между представлениями и на дополнительных страницах. Вот что сказал их вице-президент по дизайну:
Мы твердо намерены реализовать переходы представлений во всех будущих функциях, где это имеет смысл. Некоторые области уже определены, и команда активно в них инвестирует.
Кришна Р.В., вице-президент по дизайну
ПолитикаБазар
PolicyBazaar со штаб-квартирой в Гургаоне является крупнейшим в Индии страховым агрегатором и транснациональной компанией в области финансовых технологий.
Почему PolicyBazaar реализовал переходы представлений?
Будучи компанией, ориентированной на Интернет, команда PolicyBazaar всегда стремилась обеспечить максимально возможный пользовательский опыт на всех критически важных этапах взаимодействия с пользователем. Реализация пользовательских переходов с использованием JavaScript и CSS была обычной практикой еще до запуска API View Transitions, поскольку они улучшали взаимодействие с пользователем, создавали плавный поток навигации и улучшали общую визуальную привлекательность своих веб-сайтов.
Однако за эти пользовательские реализации пришлось заплатить периодическими задержками, связанными с производительностью, сложностями обслуживания кода и неоптимальной совместимостью с используемыми платформами. API View Transitions помог им преодолеть большинство этих проблем, предоставив простой в использовании интерфейс с преимуществами производительности, доступными изначально.
PolicyBazaar использовал переходы между просмотрами различных элементов в своих путешествиях перед ценой, чтобы потенциальным покупателям было интересно предоставлять необходимую информацию для приобретения страховых полисов.
Технические подробности реализации
Они используют гибридный подход, в котором Angular и React доминируют в большей части их кодовой базы. Вот выдержка из кода VT, написанного на 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');
}
Отзыв
Ришаб Мехротра, руководитель отдела дизайна (Life BU), сказал, что переходы между просмотрами сыграли значительную роль в улучшении взаимодействия с веб-сайтом для пользователей за счет повышения удобства использования, вовлеченности и общего удовлетворения. Это помогло обеспечить плавную навигацию, управляемое взаимодействие, снижение когнитивной нагрузки, современную эстетику и многое другое.
Повышение качества веб-опыта является первостепенной целью для PB, и VT зарекомендовал себя как инструмент в достижении этой цели с поразительной легкостью. Его широкая привлекательность как среди нашего сообщества разработчиков, так и среди пользователей вселила в нашу команду чувство энтузиазма. Рассматривая возможность его интеграции в различные POD, мы ожидаем далеко идущего положительного влияния на уровень удовлетворенности и операционную эффективность.
Саураб Тивари (технический директор PolicyBazaar)
Следующие шаги
Хотите попробовать переходы между видами? Вот некоторые ресурсы, которые вы можете использовать, чтобы узнать больше: