Что нового в переходах между видами? (Обновление Google I/O 2024)

Bramus

Опубликовано: 16 мая 2024 г.

На Google I/O 2024 я объявил о следующем шаге по переходам между представлениями: переходы между представлениями между документами для многостраничных приложений (MPA).

Кроме того, я поделился некоторыми улучшениями, которые позволяют вам легче работать с переходами представлений в целом.

• Совместное использование стилей анимации между псевдоэлементами перехода представления с помощью view-transition-class .
• Выборочные переходы просмотра с активными типами.

Эти улучшения применимы как к переходам между представлениями одного и того же документа для одностраничных приложений (SPA), так и к переходам между представлениями между документами для MPA.

Переходы между представлениями документов для MPA

В Chrome 111 команда Chrome реализовала переходы просмотра одного и того же документа для одностраничных приложений — функцию, хорошо принятую сообществом веб-разработчиков.

Приятно видеть, что многие из вас создали с помощью переходов представлений. Начиная от типичных реализаций, которые «заставляют миниатюру превращаться в большую фотографию», до полностью настраиваемых иммерсивных возможностей, таких как эта от Airbnb. Удивительный!

Однако первоначальная реализация требовала создания SPA для использования переходов представлений. Начиная с Chrome 126, это уже не так: переходы представлений теперь включены по умолчанию для навигации одного и того же источника. Теперь вы можете создать переход между двумя разными документами одного происхождения.

Чтобы включить переходы между представлениями документов, обе стороны должны дать свое согласие. Для этого используйте at-правило @view-transition и установите для дескриптора navigation auto .

@view-transition {
  navigation: auto;
}

Переходы между представлениями между документами используют те же строительные блоки и принципы, что и переходы между представлениями одного документа. Элементы, к которым применено view-transition-name захватываются, и вы можете настроить анимацию с помощью анимации CSS.

Чтобы настроить переходы между представлениями между документами, используйте события pageswap и pagereveal , которые предоставляют вам доступ к объекту перехода представления.

• С помощью pageswap вы можете внести некоторые изменения на исходящую страницу в последнюю минуту, прямо перед тем, как будут сделаны старые снимки.
• С помощью pagereveal вы можете настроить новую страницу до того, как она начнет отображаться после инициализации.

В обоих событиях у вас есть доступ к объекту NavigationActivation для настройки перехода между представлениями документов на основе старых и новых записей истории назначения или типа навигации .

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

Демо

Эта демонстрационная версия Stack Navigator сочетает в себе все эти функции (а также некоторые улучшения ).

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

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    // Determine animation type based on the old/new history entries
    const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
    document.documentElement.dataset.transition = transitionClass;

    // Cleanup after transition ran
    await e.viewTransition.finished;
    delete document.documentElement.dataset.transition;
  }
});

Прочтите документацию

Дополнительную информацию о том, как активировать и настраивать переходы между представлениями между документами, см. в нашей документации по переходам между представлениями между документами .

Посмотреть улучшения переходов

Помимо реализации переходов между представлениями между документами для MPA, Chrome также включает несколько усовершенствований в работу с переходами представлений в целом.

Эти улучшения применимы как к переходам представлений одного и того же документа для SPA, так и к переходам представлений между документами для MPA.

Делитесь стилями анимации с помощью view-transition-class

До сих пор при одинаковой анимации нескольких снимков вам нужно было нацеливаться на каждый снимок индивидуально, повторяя его псевдоселектор для каждого элемента, имеющего уникальное view-transition-name .

С помощью view-transition-class теперь вы можете добавить общее имя ко всем снимкам. Используйте это общее имя в псевдоселекторах, чтобы выбрать все соответствующие снимки. В результате получаются гораздо более простые селекторы, которые автоматически масштабируются от одного до многих элементов.

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

В следующем примере карточек используется view-transition-class для применения одинакового времени анимации ко многим снимкам с помощью одного селектора.

Чтобы узнать больше о view-transition-class , прочитайте специальную документацию по view-transition-class .

Выборочные переходы видов с активными типами

Еще одним усовершенствованием переходов представлений является добавление типов к переходу представлений при их захвате и выполнении. Это упрощает работу с различными переходами представлений на одной странице, при этом объявления одного не изменяют другого.

Например, при переходе на следующую или предыдущую страницу в последовательности страниц вы можете использовать разные анимации в зависимости от того, переходите ли вы на более высокую или нижнюю страницу последовательности.

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

С типами перехода представления вы можете добиться того же результата, но дополнительным преимуществом является автоматическая очистка этих типов после завершения перехода представления. Типы применяются только при захвате или выполнении перехода.

Для переходов между представлениями одного и того же документа передайте types в метод startViewTransition , который теперь принимает объект. update — это функция обратного вызова, которая обновляет DOM, а types — это последовательность строк.

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
}););

Для перехода между представлениями между документами задайте типы в правиле @view-transition с помощью дескриптора types или задайте их на лету в событиях pageswap и pagereveal .

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

Установив типы, вы можете реагировать на эти типы в своем CSS, используя селекторы псевдоклассов :active-view-transition-type() и :active-view-transition , которые применяются к корню перехода представления.

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

Чтобы узнать больше о типах перехода представлений, обратитесь к специальной документации по переходам представлений одного и того же документа и переходам представлений между документами .

Обратная связь

Отзывы разработчиков всегда ценны. Для этого отправьте сообщение о проблеме в рабочую группу CSS на GitHub с предложениями и вопросами. Префикс проблемы с помощью [css-view-transitions] .

Если вы столкнетесь с ошибкой, вместо этого сообщите об ошибке в Chromium .