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