animation.done 调用了另一个元素

Question

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

<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