是否可以在沒有任何點擊事件的動畫觸發器中進行狀態更改？

Question

我的動畫觸發器有三種狀態： Void，True和False。

我正在使用訂閱來檢查其中一個變量是否有變化。如果有變化，狀態更改爲true，並彈出窗口按照以下動畫：

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

我想這個彈出窗口很短的時間（1秒）後消失，而不會觸發任何點擊事件或變化。

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