我正在玩动画API,我想为顶级路由视图创建一个可重用的动画,比如滑入内容.我成功地通过了时髦的元数据语法(一旦克服了使用元数据的疯狂 idea ,它实际上相当酷)来让动画大部分工作正常.
@Component({
//moduleId: module.id,
selector: 'album-display',
templateUrl: './albumDisplay.html',
animations: [
trigger('slideIn', [
state('*', style({
transform: 'translateX(100%)',
})),
state('in', style({
transform: 'translateX(0)',
})),
state('out', style({
transform: 'translateX(-100%)',
})),
transition('* => in', animate('600ms ease-in')),
transition('in => out', animate('600ms ease-in'))
])
]
})
export class AlbumDisplay implements OnInit {
slideInState = 'in';
...
}
然后将其分配给组件中的顶级元素:
<div class="container" [@slideIn]="slideInState">
这是可行的,但我怎样才能使其可重复使用?我不想把这些元数据粘贴到每个视图上.因为这是元数据,所以我不确定如何使其可重用.