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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

красныйавтобус

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 использовала API View Transition для элементов подсказок, таких как «зачем покупать», что сделало их визуально привлекательными и улучшило использование таких функций.

Включив переходы просмотра, мы устранили повторяющийся код 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 будет вызвано неожиданно (когда фактический курсор еще не движется).

Ресурсы

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

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

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