时间戳

首页 > 解决方案 > 角度动画：未触发

javascript - 角度动画：未触发

问题描述

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

标签： javascriptcssangular

解决方案

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

推荐阅读