angular5的动效(animations)怎么实现类似jq的stop()效果

Question

就是动画没有done之前不再执行start，animateleave时延迟的话，延迟没有结束不再执行start。按照官网的例子写的一个dialog组件，鼠标指针hover时候显隐。

但是快速划过的时候出现的样子不太友好，求问如何解决。

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是从组件外传入的bool值。

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>

Answer 1

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;
    }
    ...
}