Угловая анимация перехода страницы определенных элементов
Я хотел бы сделать переход по маршруту, но не простой слайд / слайд в анимации. Я ищу анимацию, подобную этой слева ( Hugo)
Я знаю, как анимировать маршруты, которые будут перерисовывать весь контент. Но как мне добиться эффекта перехода одного / нескольких компонентов в другой (этот эффект увеличения / увеличения слева) с изменением маршрута.
Буду признателен за любой совет или направление, где искать примеры кодов.
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'
}
}
]