Что нового в переходах между видами? (Обновление 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 это больше не так, переходы между представлениями теперь включены по умолчанию для навигации с одним и тем же источником. Теперь вы можете создать переход между представлениями между двумя разными документами с одним и тем же источником.

Чтобы включить переходы между представлениями документов, обе стороны должны согласиться. Для этого используйте @view-transition at-rule и установите 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 .