Angular

Question

有没有办法在动画键上监听与状态匹配的元素变化？

例如，如果我们有这个元素：

<div id="first-div" @fadeInOut></div>
<div id="second-div" @fadeInOut @shaking></div>
<div id="third-div" @shaking></div>

我想听听哪个元素当前有 fadeInOut 动画并确定它是 :enter 还是 :leave。

类似于：

animations.on('fadeInOut').subscribe((el) => {
  // el will tell us which element is animation and it's having which state.
});

Answer 1

我们可以使用动画触发回调来监听动画阶段。

component.html

<div id="first-div" (@fadeInOut.start)="captureStartEvent($event)" @fadeInOut> 
</div>

component.ts

captureStartEvent(event: AnimationEvent) {
   
  }

Angular - 监听动画元素的状态变化