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