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

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

Как добавить ng-bootstrap компоненты в проект Angular-CLI?

Покажу на примере нового проекта.

ng new project_name
cd project_name
npm install --save bootstrap@next
npm install --save @ng-bootstrap/ng-bootstrap

В angular-cli.json в секцию style надо добавить наш CSS, чтобы глобально подключить стили.

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
17 августа 2017 г. в Angular

RxJS Pipeable Operators

Начиная с версии rxjs 5.5 операторы вместо цепочки вызовов применяются как параметры функции pipe.

Angular. Can't set breakpoints in VS Code

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