Angular анимация для router-outlet

Библиотека анимаций ngx-animations предоставляет удобное решение для Router анимаций.

Сначала стандартно добавляется свойство animation в data:

{
    path: "animals",
    component: AnimalsComponent,
    data: { animation: "AnimalsPage" }  // значение для выбора типа анимации
},
{
    path: "fruits",
    component: FruitsComponent,
    data: { animation: "FruitsPage" }
}

и прокидываются в @routeAnimation

<main [@routeAnimation]="o.activatedRouteData.animation">
    <router-outlet #o="outlet"></router-outlet>
</main>

Далее берем { animations, buildRouteTransition } from 'ngx-animations' и делаем приятно.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    trigger('routeAnimation', [
      buildRouteTransition({
        stateChangeExpr: "FruitsPage => AnimalsPage",
        enter: animations.zoomInLeft(500),
        leave: animations.zoomOutRight(200)
      })
      buildRouteTransition({
        stateChangeExpr: '* => *', 
        enter: animations.fadeIn(125),
        leave: animations.fadeOut(125),
      }),
    ]),
  ],
})
export class AppComponent {}

Demo

Похожие записи

Отладка Angular в VS Code

Настройка Visual Studio Code используя расширение Debugger for Chrome для отладки Angular приложений
03 декабря 2017 г. в Angular

Angular. Can't set breakpoints in VS Code

Вариант решения проблемы, когда не срабатывают точки остановки при разработке Angular приложений в редакторе VS Code
10 апреля 2018 г. в Angular

@Directive v/s @Component in Angular

Компоненты создают DOM элементы и добавляют к ним поведение, а директивы только добавляют поведение к существующим DOM элементам

13 августа 2018 г. в Angular

Angular. Functions & getters в шаблонах

На каждый цикл механизма обнаружения изменений выполняется метод из шаблона. Если этого надо избежать, то следует использовать pure pipe или результат выполнения присвоить свойству компонента