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

Question

我的動畫觸發器具有三種狀態：無效，正確和錯誤。

我正在使用訂閱檢查變量之一是否發生更改。 如果進行了更改，則狀態更改為true，並根據以下動畫顯示彈出窗口：

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