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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

redBus

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

Инвестиционная вертикаль Policybazaar использовала API View Transition для элементов подсказок, таких как «почему купить», что сделало их визуально привлекательными и улучшило использование таких функций.

Внедрив 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;
}

Что следует учитывать при использовании View Transition API

При использовании нескольких эффектов перехода между представлениями на одной странице убедитесь, что у вас есть разные имена переходов между представлениями для каждого эффекта или раздела, чтобы избежать конфликтов.

Пока переход вида активен (переход), он добавит новый слой поверх остальной части пользовательского интерфейса. Поэтому избегайте запуска перехода при наведении, поскольку событие mouseLeave будет запущено неожиданно (когда фактический курсор еще не движется).

Ресурсы

• Плавные и простые переходы с API View Transition
• Объяснение: Просмотр переходов для MPA
• Пример из практики: плавная навигация стала возможной благодаря View Transitions
• Пример использования: Что может сделать Интернет!? | Предоставляйте навигацию в стиле приложений
• Предложение по взаимодействию: сделать переходы между представлениями доступными во всех браузерах
• Хотите сообщить об ошибке или запросить новую функцию? Мы хотим услышать от вас по поводу SPA и MPA .

Ознакомьтесь с другими статьями этой серии, в которых рассказывается о том, как компании электронной коммерции получили выгоду от использования новых функций CSS и пользовательского интерфейса, таких как анимация с прокруткой, всплывающие окна, контейнерные запросы и селектор has() .

• Почему возможности веб-интерфейса важны для вашего сайта электронной коммерции?
• Примеры анимаций, управляемых прокруткой
• Примеры использования API Popover
• Примеры использования контейнерных запросов
• Примеры использования селектора :has()