我有一个带有动画效果的提示组件，其中 :enter 动画效果正常工作，但是 :leave 动画效果从未触发。
这里是一个指向 Stackblitz 的链接： https://stackblitz.com/edit/building-tooltip-eoby9e?file=src/app/tooltip/tooltip.component.ts
animations: [
trigger('tooltip', [
transition(':enter', [
style({ opacity: 0 }),
animate(300, style({ opacity: 1 })),
]),
transition(':leave', [
animate(300, style({ opacity: 0 })),
]),
]),
],
另一个使用 @HostBinding 的示例：
@Component({
selector: 'app-dialog',
template: '<ng-container cdkPortalOutlet></ng-container>',
changeDetection: ChangeDetectionStrategy.OnPush,
animations: [
trigger('dialog', [
transition(':enter', [
style({
opacity: 0,
transform: 'translateY(-100%)'
}),
animate('400ms ease-out',
style({
opacity: 1,
transform: 'translateY(0)'
}))
]),
transition(':leave', [
animate('400ms ease-out',
style({
opacity: 0,
transform: 'translateY(-100%)'
}))
])
])
]
})
export class DialogComponent extends BasePortalOutlet implements OnDestroy, OnInit {
@ViewChild(CdkPortalOutlet) portalOutlet: CdkPortalOutlet;
@HostBinding('@dialog') dialog = true;