我想做路线过渡,但不是简单的滑出/滑入动画。 我正在寻找像左边这个这样的动画。
我知道如何制作将重绘整个内容的路线动画。但是如何通过改变路线来实现一个/多个组件过渡到另一个组件的效果(左侧的放大/缩放效果)。
我将不胜感激任何建议或指导在哪里寻找一些示例代码。
您应该阅读可路由动画。查看 Matias Niemelä(负责 @angular/animations 的人)撰写的这篇博文。
TL;博士:
<!-- app.html -->
<div [@routeAnimation]="prepRouteState(routerOutlet)">
<!-- make sure to keep the ="outlet" part -->
<router-outlet #routerOutlet="outlet"></router-outlet>
<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'
}
}
]