Переходы просмотра — это анимированные и плавные переходы между различными состояниями веб-страницы или пользовательского интерфейса приложения. API View Transitions был разработан, чтобы позволить вам создавать эти эффекты более простым и эффективным способом, чем это было возможно раньше. API предлагает множество преимуществ по сравнению с предыдущими подходами JavaScript, включая:
- Улучшенный пользовательский интерфейс: плавные переходы и визуальные подсказки помогают пользователям ориентироваться в изменениях пользовательского интерфейса, делая навигацию естественной и менее резкой.
- Визуальная непрерывность. Поддержание ощущения непрерывности между представлениями снижает когнитивную нагрузку и помогает пользователям сохранять ориентацию в приложении.
- Производительность: API старается использовать как можно меньше ресурсов основного потока, что обеспечивает более плавную анимацию.
- Современная эстетика. Улучшенные переходы делают интерфейс более привлекательным и привлекательным для пользователей.
Этот пост является частью серии, в которой рассказывается о том, как компании электронной коммерции улучшили свой веб-сайт с помощью новых функций CSS и пользовательского интерфейса. В этой статье вы узнаете, как некоторые компании внедрили API View Transitions и получили от него пользу.
красныйавтобус
redBus всегда старался создать как можно больший паритет между собственным и веб-интерфейсом. До появления API View Transitions реализация этих анимаций в наших веб-ресурсах была сложной задачей. Но с помощью API мы обнаружили, что интуитивно понятно создавать переходы между несколькими действиями пользователя, чтобы сделать работу в Интернете более похожей на приложение. Все это в сочетании с преимуществами в производительности делает эту функцию обязательной для всех веб-сайтов », — Амит Кумар , старший технический менеджер, redBus .
Команда реализовала переходы видов в нескольких местах. Вот пример комбинации анимации постепенного появления и скольжения на значке входа на главной странице.
Код
В этой реализации используется несколько view-transition-name и пользовательские анимации ( scale-down и scale-up ). Использование view-transition-name с уникальным значением отделяет компонент входа от остальной части страницы, чтобы анимировать его отдельно. Создание нового уникального view-transition-name также создает новую группу ::view-transition-group в дереве псевдоэлементов (показано в следующем коде), что позволяет манипулировать ею отдельно от группы по умолчанию ::view-transition-group(root) .
::view-transition
├─::view-transition-group(root)
│ └─…
├─::view-transition-group(signin)
│ └─…
└─::view-transition-group(signinclose)
└─…
//Code for VT for login
if (!document.startViewTransition) {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
} else {
const transition = document.startViewTransition();
transition.ready.finally(() => {
setTimeout(() => {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
}, 500);
});
}
.signin_open {
view-transition-name: signin;
}
.signin_close {
view-transition-name: signinclose;
}
::view-transition-group(signin),
::view-transition-group(signinclose) {
animation-duration: 0.5s;
}
::view-transition-old(signin) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
::view-transition-new(signin) {
animation-name: -ua-view-transition-fade-in, scale-up;
}
::view-transition-new(signinclose) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
@keyframes scale-down {
to {
scale: 0;
}
}
@keyframes scale-up {
from {
scale: 0;
}
}
Токопедия
Команда использовала переходы между видами, чтобы добавить анимацию затухания, когда пользователь переключается между миниатюрами продуктов.
Реализация настолько проста, что с помощью
startViewTransitionмы сразу получаем более приятный плавный переход по сравнению с предыдущей реализацией без каких-либо эффектов — Энди Вихалим , старший инженер-программист, Tokopedia .
До
После
Код
Следующий код использует платформу React и включает код, специфичный для платформы, например, flushSync. Подробнее о работе с фреймворками для реализации переходов представлений читайте здесь. Это базовая реализация, которая проверяет, поддерживает ли браузер startViewTransition , и если да, то выполняет переход. В противном случае происходит возврат к поведению по умолчанию.
const handleClick =
({ url, index }) =>
() => {
if ('startViewTransition' in document) { //check if browser supports VT
document.startViewTransition(() => {
flushSync(() => {
setDisplayImage({ url, index });
setActiveImageIndex(index);
});
});
} else { //if VT is not supported, fall back to default behavior
setDisplayImage({ url, index });
setActiveImageIndex(index);
}
};
...
<Thumbnail onClick={handleClick({url, index})} />
Политический базар
Инвестиционная вертикаль Policybazaar использовала API View Transitions для элементов подсказок, таких как «зачем покупать», что сделало их визуально привлекательными и улучшило использование таких функций.
Включив переходы просмотра, мы устранили повторяющийся код CSS и JavaScript, отвечающий за управление анимацией в различных состояниях. Это позволило сэкономить усилия на разработку и значительно улучшить взаимодействие с пользователем » , — Аман Сони , технический руководитель, Policybazaar .
Код
Следующий код аналогичен предыдущим примерам. Следует отметить возможность переопределять стили и анимацию по умолчанию ::view-transition-old(root) и ::view-transition-new(root) . В этом случае animation-duration по умолчанию была обновлена до 0,4 секунды.
togglePBAdvantagePopup(state: boolean) {
this.showPBAdvantagePopup = state;
if(!document.startViewTransition) {
changeState();
return;
}
document.startViewTransition(() => {changeState();});
function changeState() {
document.querySelector('.block_section').classList.toggle('hide');
document.querySelector('.righttoggle_box').classList.toggle('show');
}
}
.righttoggle_box{
view-transition-name: advantage-transition;
}
.block_section{
view-transition-name: advantage-transition;
}
::view-transition-old(root), ::view-transition-new(root) {
animation-duration: 0.4s;
}
Что следует учитывать при использовании API View Transitions
При использовании нескольких эффектов перехода представления на одной странице убедитесь, что у вас есть разные имена перехода просмотра для каждого эффекта или раздела, чтобы предотвратить конфликты.
Пока переход представления активен (переход), он добавит новый слой поверх остальной части пользовательского интерфейса. Поэтому избегайте запуска перехода при наведении курсора мыши, поскольку событие mouseLeave будет вызвано неожиданно (когда фактический курсор еще не движется).
Ресурсы
- Плавные и простые переходы с помощью View Transitions API
- Объяснение: просмотр переходов для MPA
- Практический пример: плавная навигация стала возможной с помощью View Transitions
- Практический пример: Что может Интернет? | Обеспечьте навигацию, подобную приложениям
- Предложение Interop: сделать переходы просмотра доступными во всех браузерах
- Хотите сообщить об ошибке или запросить новую функцию? Мы хотим услышать ваше мнение по поводу SPA и MPA .
Изучите другие статьи этой серии, в которых рассказывается о том, какую выгоду компании электронной коммерции получили от использования новых функций CSS и пользовательского интерфейса, таких как анимация, управляемая прокруткой, всплывающее окно, запросы контейнера и селектор has() .