动画触发器中可能发生状态变化，而无需单击事件

Question

我的动画触发器具有三个状态：void，True和False。

我正在使用订阅来检查其中一个变量是否发生了变化。如果有变化，则根据以下动画的形式出现对真实的状态变化，弹出窗口出现：

animations: [
        trigger('visibilityChanged', [
            state('void' , style({ opacity: 0})),
            state('true' , style({ opacity: 1})),
            state('false', style({ opacity: 0})),
            transition('* => *', animate('.5s'))
        ])
    ]

我希望此弹出窗口在短时间（1s）后消失，而不会触发任何单击事件或更改。

Answer 1

您可以使用一个主题进行订阅，然后对其进行两次订阅：

• 一次捕捉更改
• 例如，一次回答时间为1000，然后关闭模式

这是一个例子：

import {Component, OnInit} from '@angular/core';
import {Subject} from 'rxjs/Subject';
@Component({
  selector: 'selfclosing-popup',
  templateUrl: 'etc.'
  animations: [
    trigger('visibilityChanged', [
        state('void' , style({ opacity: 0})),
        state('true' , style({ opacity: 1})),
        state('false', style({ opacity: 0})),
        transition('* => *', animate('.5s'))
    ])
  ]
})
export class SelfclosingPopup implements OnInit {
  changeSubject = new Subject<boolean>();
  visibilityChanged: string;    
  ngOnInit(): void {    
    this.changeSubject.subscribe((change) => this.visibilityChanged = change);
    this.changeSubject.debounceTime(1000).subscribe(() => this.visibilityChanged = false);
  }
  public notifyChange() {
    this.changeSubject.next(true);
  }
}