为确保在每个路由上都运行路由动画,您需要在每个路由之间定义过渡效果。以下是我用于在“主页”路由和“账户”路由之间创建抽屉效果的示例:
import { trigger, animate, style, group, query, transition } from '@angular/animations';
export const baseAnimation =
trigger('baseAnimation', [
transition('acct => home', [
query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 })),
query(':leave', style({ height: '*'})),
query('.acct', [
animate('300ms',
style({ height: 0 }))
])
]),
transition('home => acct', [
query(':enter, :leave',
style({ position: 'absolute', top: 0, left: 0, right: 0 })),
query(':enter .acct', [
style({ height: 0 }),
animate('300ms', style({ height: '*' }))
])
])
])
请注意,
.acct
是帐户页面路由的类标签,可能对您的应用程序不必要(或需要相应更改)。通过这种方式,您可以在路由更改时动画化每个路由的子元素。
我在
app.component.html中使用一个函数来处理路由动画:
<div [@baseAnimation]="prepareRouteTransition(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</div>
</div>
app.component.ts 应该加载动画并为路由声明动画:
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { baseAnimation } from './anim/base.animation';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
animations: [ baseAnimation ]
})
export class AppComponent {
constructor() { }
prepareRouteTransition(outlet) {
const animation = outlet.activatedRouteData['animation'] || {};
return animation['value'] || null;
}
}
transition('route1 => route2', ....
,你需要为不同的路由查询query(':enter',...
和query(':leave', ...
。如果需要,我可以在下面添加更详细的答案。 - Z. Bagley