Угловая анимация перехода страницы определенных элементов

Question

Я хотел бы сделать переход по маршруту, но не простой слайд / слайд в анимации. Я ищу анимацию, подобную этой слева ( Hugo)

Я знаю, как анимировать маршруты, которые будут перерисовывать весь контент. Но как мне добиться эффекта перехода одного / нескольких компонентов в другой (этот эффект увеличения / увеличения слева) с изменением маршрута.

Буду признателен за любой совет или направление, где искать примеры кодов.

Answer 1

Вы должны прочитать о Routable Animations. Прочтите этот пост в блоге Матиаса Нимеля (парень, ответственный за @angular/animations).

Новая волна-из-анимации-функций

TL;DR:

<!-- app.html -->
<div [@routeAnimation]="prepRouteState(routerOutlet)">
    <!-- make sure to keep the ="outlet" part -->
  <router-outlet #routerOutlet="outlet"></div>
<div>


// app.ts
@Component({
  animations: [
    trigger('routeAnimation', [
      // no need to animate anything on load
      transition(':enter', []),
      // but anytime a route changes let's animate!
      transition('homePage => supportPage', [
        // ... some awesome animation here
      ]),
      // and when we go back home
      transition('supportPage => homePage', [
        // ... some awesome animation here
      ])
    ])
  ] 
})
class AppComponent {
  prepRouteState(outlet: any) {
    return outlet.activatedRouteData['animation'] || 'firstPage'; 
  }
}

<!-- app-routing.module.ts -->
const ROUTES = [
  { path: '',
    component: HomePageComponent,
    data: {
      animation: 'homePage'
    }
  },
  { path: 'support',
    component: SupportPageComponent,
    data: {
      animation: 'supportPage'
    }
  }
]