javascript - Angular 动画 :leave not triggered

Question

我有一个带有动画的工具提示组件，其中 :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;

Answer 1

这是一个棘手的案例。出现/消失的组件是 AwesomeTooltipComponent 而在您的示例动画附加到它的 child ，因此 parent 立即消失。我通过在 HostBinding 而非其子 div 的帮助下将动画应用于 AwesomeTooltipComponent 来解决此问题。 在这里查看 https://stackblitz.com/edit/building-tooltip-h4pxnf?file=src%2Fapp%2Ftooltip%2Ftooltip.component.ts