即使状态没有改变，动画回调也会立即运行

Question

我正在 angular 中创建动画，我需要知道它何时开始，所以我定义了一个回调。问题是当组件加载时回调被触发，即使没有改变状态。

模板

<button (click)="click()">click</button>
<div class="myclass" [@throwBall]="state" (@throwBall.start)="animStart($event)" >  
</div>

组件：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger('throwBall', [
      state('steady', style({ })),
      state('throw', style({ top: '300px' })),
      transition('steady => throw', [animate('2s')])
    ]),
    trigger('blockInitialRenderAnimation', [
        transition(':enter', [])
    ])
  ]
})
export class AppComponent  {
  state = 'steady';

  click() {
    this.state = 'throw';
  }
  animStart(event: any) {
    if (event.fromState !== 'void') {
      console.log('anim start callback');
    }
  }
}

这是一个演示： https://stackblitz.com/edit/angular-9szgic

为什么在组件加载时在控制台中显示 'anim start callback'？

Answer 1

动画的初始状态是一个名为 void 的 "stateless" 状态 - 这是使用动画时的默认状态。将 state 变量初始化为 steady 后，一个不存在的动画从 void -> steady.

开始

为了达到您的目标，您应该使用 AnimationEvent 的属性 fromState 和 toState。

import { AnimationEvent, } from '@angular/animations';

public animStart(event: AnimationEvent): void {
   if(event.fromState === 'steady') {
      // ...
   }
}

尝试在您的 animStart 方法中记录 AnimationEvent 以便更好地理解此 interface。

public animStart(event: AnimationEvent): void {
   console.log(event);
}

即使状态没有改变，动画回调也会立即运行

Animation callbacks runs immediately even without the state being changed

angular

angular-animations