Анимации маршрутов

Анимации маршрутов в Angular позволяют плавно изменять состояние компонентов при переходах между страницами. Основной инструмент для этого — RouterOutlet совместно с trigger и специальными transition для состояний маршрутов.

Настройка анимаций маршрутов

  1. В модуле необходимо включить поддержку анимаций:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    RouterModule.forRoot(routes)
  ],
})
export class AppModule {}
  1. В компоненте с RouterOutlet задаются анимации:
@Component({
  selector: 'app-root',
  template: `
    <div [@routeAnimations]="prepareRoute(outlet)">
      <router-outlet #outlet="outlet"></router-outlet>
    </div>
  `,
  animations: [
    trigger('routeAnimations', [
      transition('* <=> *', [
        style({ opacity: 0, transform: 'translateY(20px)' }),
        animate('500ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
      ])
    ])
  ]
})
export class AppComponent {
  prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
  }
}

Присвоение меток анимации маршрутам

Для контроля переходов задаются данные маршрутов:

const routes: Routes = [
  { path: 'home', component: HomeComponent, data: { animation: 'HomePage' } },
  { path: 'about', component: AboutComponent, data: { animation: 'AboutPage' } }
];

Использование таких меток позволяет Angular различать состояния маршрутов и применять нужные переходы.

Сложные переходы

Можно комбинировать входящие и исходящие анимации:

transition('HomePage => AboutPage', [
  query(':enter, :leave', style({ position: 'absolute', width: '100%' }), { optional: true }),
  query(':enter', style({ transform: 'translateX(100%)', opacity: 0 }), { optional: true }),
  group([
    query(':leave', animate('500ms ease-out', style({ transform: 'translateX(-100%)', opacity: 0 })), { optional: true }),
    query(':enter', animate('500ms ease-out', style({ transform: 'translateX(0)', opacity: 1 })), { optional: true })
  ])
])

В этом примере происходит одновременное смещение уходящего компонента влево и входящего справа, создавая эффект скользящего перехода между страницами.

Использование query и group

  • query — выбор элементов для анимации, например :enter и :leave.
  • group — выполнение нескольких анимаций одновременно.
  • stagger — создание последовательного эффекта для коллекций элементов:
query(':enter .item', stagger(100, [
  animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
]), { optional: true })

Такая комбинация позволяет создавать динамичные и сложные визуальные эффекты при смене маршрутов, улучшая восприятие интерфейса пользователем.

Оглавление