Анимация переходов между маршрутами

Анимация переходов между маршрутами улучшает взаимодействие с приложением, обеспечивая плавные визуальные переходы при навигации между разными представлениями приложения Angular. Angular Router имеет встроенную поддержку API браузера View Transitions, позволяющего плавно анимировать переходы между маршрутами в поддерживаемых браузерах.

Как работают View Transitions

View Transitions используют нативный document.startViewTransition API браузера для создания плавной анимации между разными состояниями приложения. API работает следующим образом:

1. Сохранение текущего состояния — браузер делает снимок текущей страницы
2. Выполнение обновления DOM — функция обратного вызова обновляет DOM
3. Сохранение нового состояния — браузер делает снимок обновлённого состояния страницы
4. Воспроизведение перехода — браузер анимирует переход от старого состояния к новому

Вот базовая структура API startViewTransition:

document.startViewTransition(async () => {
  await updateTheDOMSomehow();
});

Подробнее о браузерном API см. в пояснении Chrome.

Как Router использует View Transitions

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

1. Завершает подготовку навигации — выполняются сопоставление маршрутов, отложенная загрузка, защитники маршрутов и резолверы
2. Запускает переход между представлениями — Router вызывает startViewTransition, когда маршруты готовы к активации
3. Обновляет DOM — Router активирует новые маршруты и деактивирует старые в рамках функции обратного вызова перехода
4. Завершает переход — Promise перехода разрешается, когда Angular завершает отрисовку

Интеграция Router с View Transitions служит примером прогрессивного улучшения. Если браузеры не поддерживают API View Transitions, Router выполняет обычное обновление DOM без анимации, благодаря чему приложение работает во всех браузерах.

Включение View Transitions в Router

Чтобы включить View Transitions, добавьте функцию withViewTransitions в конфигурацию маршрутизатора. Angular поддерживает как автономную загрузку, так и загрузку с помощью NgModule:

Автономная загрузка

import {bootstrapApplication} from '@angular/platform-browser';
import {provideRouter, withViewTransitions} from '@angular/router';
import {routes} from './app.routes';

bootstrapApplication(MyApp, {
  providers: [provideRouter(routes, withViewTransitions())],
});

Загрузка с помощью NgModule

import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';

@NgModule({
  imports: [RouterModule.forRoot(routes, {enableViewTransitions: true})],
})
export class AppRouting {}

Попробуйте пример «count» на StackBlitz

В этом примере показано, как навигация Router может заменить прямые вызовы startViewTransition для обновления счётчика.

Настройка переходов с помощью CSS

Вы можете настраивать View Transitions с помощью CSS, создавая уникальные эффекты анимации. Браузер создаёт отдельные элементы перехода, к которым можно обращаться с помощью CSS-селекторов.

Чтобы создать собственные переходы:

1. Добавьте view-transition-name — присвойте уникальные имена элементам, которые нужно анимировать
2. Определите глобальные анимации — создайте CSS-анимации в глобальных стилях
3. Выберите псевдоэлементы перехода — используйте селекторы ::view-transition-old() и ::view-transition-new()

Вот пример добавления эффекта вращения к элементу счётчика:

/* Define keyframe animations */
@keyframes rotate-out {
  to {
    transform: rotate(90deg);
  }
}

@keyframes rotate-in {
  from {
    transform: rotate(-90deg);
  }
}

/* Target view transition pseudo-elements */
::view-transition-old(count),
::view-transition-new(count) {
  animation-duration: 200ms;
  animation-name: -ua-view-transition-fade-in, rotate-in;
}

::view-transition-old(count) {
  animation-name: -ua-view-transition-fade-out, rotate-out;
}

Попробуйте обновлённый пример «count» на StackBlitz

Расширенное управление переходами с помощью onViewTransitionCreated

Функция withViewTransitions принимает объект параметров с функцией обратного вызова onViewTransitionCreated, позволяющей расширенно управлять переходами между представлениями. Эта функция обратного вызова:

• Выполняется в контексте внедрения зависимостей
• Получает объект ViewTransitionInfo, содержащий:
  • Экземпляр ViewTransition из startViewTransition
  • ActivatedRouteSnapshot маршрута, с которого выполняется переход
  • ActivatedRouteSnapshot маршрута, на который выполняется переход

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

import {inject} from '@angular/core';
import {Router, withViewTransitions, isActive} from '@angular/router';

withViewTransitions({
  onViewTransitionCreated: ({transition}) => {
    const router = inject(Router);
    const targetUrl = router.currentNavigation()!.finalUrl!;

    // Skip transition if only fragment or query params change
    const config = {
      paths: 'exact',
      matrixParams: 'exact',
      fragment: 'ignored',
      queryParams: 'ignored',
    };

    const isTargetRouteCurrent = isActive(targetUrl, router, config);

    if (isTargetRouteCurrent()) {
      transition.skipTransition();
    }
  },
});

В этом примере переход между представлениями пропускается, если навигация меняет только фрагмент URL или параметры запроса (например, при переходе по якорной ссылке на той же странице). Метод skipTransition() отменяет анимацию, но позволяет навигации завершиться.

Примеры из пояснения Chrome, адаптированные для Angular

В следующих примерах показаны различные способы использования View Transitions, адаптированные для Angular Router на основе документации команды Chrome:

Переходящие элементы не обязательно должны быть одним и тем же элементом DOM

Элементы могут плавно переходить между разными элементами DOM, если у них одинаковое значение view-transition-name.

• Пояснение Chrome
• Пример Angular на StackBlitz

Пользовательская анимация появления и исчезновения

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

• Пояснение Chrome
• Пример Angular на StackBlitz

Асинхронное обновление DOM и ожидание загрузки содержимого

Angular Router отдаёт приоритет немедленному выполнению переходов, а не ожиданию загрузки дополнительного содержимого.

• Пояснение Chrome

Несколько стилей переходов с помощью типов переходов между представлениями

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

• Пояснение Chrome
• Пример Angular на StackBlitz

Несколько стилей переходов с помощью имени класса корневого элемента перехода (устаревший способ)

В этом подходе для управления стилями анимации используются CSS-классы корневого элемента перехода.

• Пояснение Chrome
• Пример Angular на StackBlitz

Переходы без приостановки других анимаций

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

• Пояснение Chrome
• Пример Angular на StackBlitz

Анимация с помощью JavaScript

Управляйте переходами между представлениями программно с помощью API JavaScript в сложных сценариях анимации.

• Пояснение Chrome
• Пример Angular на StackBlitz