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

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(
     {
       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()