是否可以在没有任何点击事件的情况下在动画触发器中进行状态更改？

Question

my animation trigger has three states: Void, True and false.

I am using a subscription to check if there is a change in one of the variables. If there is a change, state changes to true and popup appears as per the following animation:

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

I want this popup to disappear after a short time (1s) without triggering any click event or change.

Answer 1

You could use a Subject for your subscription and then subscribe two times to it :

• one time for catching the change
• one time for a debounce time of 1000, for example, and then close your modal

This is an example :

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