角度：动画不在状态变化中运行

Question

我不知道为什么我不能使用this.currentState来触发所有动画，我想在一些元素中使用fadein，但是当我这样做时，它只会触发IN动画，但是如果我进行独特的触发对于每个元素和唯一的变量以保持状态，它确实可以工作，但会导致重复的代码很多。

基本上，我的代码有一个间隔来触发out状态动画，完成此动画后，它将从db中获取新数据，因此当in动画启动时，新数据将在其中滑动/淡入。

谢谢

animations: [
  trigger('fadein', [
    state('in', style({
      'animation-name': 'fadeInDown',
      'animation-fill-mode': 'both',
      'animation-duration': '.6s',
        })),
    state('out', style({
      'animation-name': 'fadeOutUp',
      'animation-fill-mode': 'both',
      'animation-duration': '.6s',
    })),
    transition('out=>in', animate('600ms')),
    transition('in=>out', animate('600ms'))
  ]),
  trigger('slideIn', [
    state('in', style({
      'animation-name': 'slideInUp',
      'animation-duration': '.6s',
      'animation-fill-mode': 'both',
      'animation-timing-function': 'ease-in'
    })),
    state('out', style({
      'animation-name': 'slideOutDown',
      'animation-duration': '.6s',
      'animation-fill-mode': 'both',
      'animation-timing-function': 'ease-out'
    })),
    transition('out=>in', animate('600ms')),
    transition('in=>out', animate('600ms'))
  ])
],

animEnd(event) {
  //console.log(event);
  if (event.toState === 'out' && event.phaseName === 'done' && event.triggerName === 'slideIn') {
    // here i am waiting for the slideout animation to finish and then to trigger the slide back in animation.
    this.changeState();
  }

  if (event.fromState === 'out' && event.phaseName === 'done' && event.triggerName === 'slideIn') {
    // here i am getting new data from db etc so that when the content slides back up its new
  };

  changeState() { 
    this.currentState = this.currentState === 'out' ? 'in' : 'out';
  };

  interval(5000).pipe(startWith(0)).subscribe(() => {
    this.changeState();
  });
}