宿主元素中的动画应该像这样处理:
animations: [
trigger('toggleDrawer', [
state('closed', style({
transform: 'translateX(0)'
})),
state('opened', style({
transform: 'translateX(80vw)'
})),
transition('closed <=> opened', animate(300))
])
]
和 HostBinding / HostListener
private state: 'opened' | 'closed' = 'closed';
// binds the animation to the host component
@HostBinding('@toggleDrawer') get getToggleDrawer(): string {
return this.state === 'closed' ? 'opened' : 'closed';
}
@HostListener('@toggleDrawer.start', ['$event']) startDrawerHandler(event: any): void {
console.log(event);
}
@HostListener('@toggleDrawer.done', ['$event']) doneDrawerHandler(event: any): void {
console.log(event);
}
请记住,HostListeners 将在加载时执行来自状态 void 的事件(fromState:“void”),我不知道这是否可以从动画声明中阻止,或者您是否只需要在如果您想防止某些事情发生,则使用 HostListeners。