Что нового в переходах между видами? (Обновление 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 и установите для дескриптора 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 .