Посмотреть примеры переходов

Swetha Gopalakrishnan

Saurabh Rajpal

Переходы между представлениями — это анимированные и плавные переходы между различными состояниями веб-страницы или пользовательского интерфейса приложения. API для переходов между представлениями разработан для того, чтобы позволить создавать эти эффекты более простым и эффективным способом, чем это было возможно ранее. Этот API предлагает множество преимуществ по сравнению с предыдущими подходами JavaScript, включая:

• Улучшенный пользовательский интерфейс: плавные переходы и визуальные подсказки помогают пользователям ориентироваться в изменениях пользовательского интерфейса, делая навигацию естественной и менее раздражающей.
• Визуальная непрерывность: сохранение ощущения непрерывности между представлениями снижает когнитивную нагрузку и помогает пользователям ориентироваться в приложении.
• Производительность: API старается использовать как можно меньше ресурсов основного потока, что обеспечивает более плавную анимацию.
• Современная эстетика: улучшенные переходы способствуют созданию приятного и увлекательного пользовательского опыта.

Эта публикация входит в серию статей о том, как компании электронной коммерции улучшили свои сайты, используя новые функции CSS и пользовательского интерфейса. В этой статье вы узнаете, как некоторые компании внедрили View Transition API и получили от него максимальную выгоду.

redBus

Компания redBus всегда стремилась к максимальному соответствию между своим нативным и веб-интерфейсом. До появления API View Transition реализация этих анимаций в наших веб-ресурсах была сложной задачей. Но с появлением 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(