animation.done 调用了另一个元素

Question

我有两个元素使用相同的动画animate 一个元素使用触发器 (@animate.done) 来执行一些逻辑 post 动画。我的问题是，如果我单击另一个元素，也会调用 done 回调：


<button [@animate]="open === 'open' ? 'open': 'closed'" (click)="toggle()">one</button> <--- If I click this 
<br>
<br>
<button [@animate]="open === 'open'? 'open': 'closed'" (@animate.done)="counter()"  (click)="toggle()">two: animation.done called: {{count}} </button> <-- then this counter goes up

我在这里做了一个例子：https://stackblitz.com/edit/angular-ivy-mukyz4?file=src/app/app.component.html

有没有办法将回调隔离到使用它的元素上？

Answer 1

您正在使用第一个按钮更改 this.open 变量，并在条件下使用相同的变量在第二个按钮上应用动画，因为第二个按钮是动画，一旦动画完成就会调用 counter() 并增加计数器。所以你必须使用单独的变量来为第二个按钮应用动画，就像这样 - https://stackblitz.com/edit/angular-ivy-ppymya?file=src%2Fapp%2Fapp.component.html

animation.done 调用了另一个元素

animation.done called on another element

html

angular

angular-animations