Javascript 角度动画：保持未触发状态

我有一个带有动画的工具提示组件，其中

：enter

动画按预期工作，但

：leave

动画从未触发

以下是stackblitz的链接：

另一个使用

@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;

@组件({
选择器：“应用程序对话框”，
模板：“”，
changeDetection:ChangeDetectionStrategy.OnPush，
动画：[
触发器（'对话框'[
转换（“：输入”[
风格({
不透明度：0，
转换：“translateY（-100%）”
}),
设置动画（“400ms放松”，
风格({
不透明度：1，
转换：“translateY（0）”的
}))
]),
过渡（“：离开”[
设置动画（“400ms放松”，
风格({
不透明度：0，
转换：“translateY（-100%）”
}))
])
])
]
})
导出类DialogComponent扩展BasePortalOutlet实现OnDestroy、OnInit{
@ViewChild（CdkPortalOutlet）portalOutlet:CdkPortalOutlet；
@HostBinding（'@dialog'）dialog=true；

这是一个棘手的问题。出现/消失的组件是

AwesomeTooltipComponent

，而在您的示例中，动画附加到其子组件，因此父组件会立即消失。我通过将动画应用到

AwesomeTooltipComponent

而不是其子组件的帮助下修复了这一问题儿童部。

---

检查这里

确实有效。虽然我有另一个案例，我有一个@HostBinding扩展了BasePortalOutlet，但是动画在那里不起作用。问题更新了。你能更新stackblitz来重现吗？我看到链接的旧示例尝试单击按钮这是一个非常巧妙的方法

@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;