How does the dynamic effect (animations) of angular5 achieve the stop () effect similar to jq?

means that if done is no longer executed before start and animate leave is delayed, start will no longer be executed before the delay ends. According to the example of the official website to write a dialog component, the mouse pointer hover is hidden.

but the appearance of a quick stroke is not very friendly. I would like to ask how to solve it.

drop-dialog.component.ts

...
@Component({
  selector: "app-drop-dialog",
  templateUrl: "./drop-dialog.component.html",
  styleUrls: ["./drop-dialog.component.scss"],
  animations: [
    trigger("fade", [
      state(ANIMATE_STATES[0], style({
        opacity: 1,
        transform: "scale(1)"
      })),
      transition(`void => *`, [
        animate("300ms ease-in", keyframes([
          style({ opacity: 0, transform: "scale(0)", offset: 0 }),
          style({ opacity: 1, transform: "scale(1.1)", offset: 0.6 }),
          style({ opacity: 1, transform: "scale(1)", offset: 1 })
        ]))
      ]),
      transition("* => void", [
        animate("200ms 400ms ease-out", keyframes([
          style({ opacity: 1, transform: "scale(1)", offset: 0 }),
          style({ opacity: 0, transform: "scale(0)", offset: 1 })
        ]))
      ])
    ])
  ]
})
export class DropDialogComponent implements OnInit {
  public state: string;
  ...

  @Input() show: boolean;
  ...
  ngOnInit() {
    ...

    this.state = this.show ? ANIMATE_STATES[0] : ANIMATE_STATES[1];
  }
  ...
}

drop-dialog.component.html

<div class="drop-dialog"
     [ngClass]="direction"
     [ngStyle]="dialogStyle"
     [@fade]="state"
     (@fade.start)="animateStart()"
     (@fade.done)="animateDone()"
     *ngIf="show">
  <i class="arrow" [ngStyle]="arrowStyle"></i>
  <div class="content">
    <ng-content></ng-content>
  </div>
</div>

@ Input () show is the bool value passed in from outside the component.

parent.component.ts

<li class="pull-right setting" (mouseover)="toggleSetting(1)"
  (mouseleave)="toggleSetting(0)">
<a href="javascript： void(0);" class="icon">
  <img src="../../../../assets/img/shared/setting.png" alt="">

  <app-drop-dialog
    direction="bot"
    arrow="17px"
    [position]="["0px", "70px"]"
    [size]="["200px", "254px"]"
    [show]="settingDialog">
    <div class="wrapper setting-dialog">
      <app-switch [init]="false" (change)="change($event)"></app-switch> <span>{{ isSelect }}</span>
    </div>
  </app-drop-dialog>
</a>
</li>

export class HeaderComponent implements OnInit { private timer = 0; public settingDialog = false; ... toggleSetting(isShow: any) { const show = !!isShow; clearTimeout(this.timer); if (!show) { // delay 600ms for hide this.timer = setTimeout(() => { this.settingDialog = show; }, 600); return; } this.settingDialog = show; } ... }