I am encountering an issue with my tooltip component's animations. The ":enter" animation is working as expected, but the ":leave" animation never seems to trigger.
For reference, here is a link to 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 })),
]),
]),
],
Here is another example involving the use of @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;