animation.done called on another element

Question

I have two elements using the same animation animate One element uses the trigger (@animate.done) to do some logic post animation. My problem is that the donecallback is also called if I click the other element:

<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

I have made an example here: https://stackblitz.com/edit/angular-ivy-mukyz4?file=src/app/app.component.html

Is there a way to isolate the callback to the element on which it is used?

Answer 1

You are changing the this.open variable using the first button and using the same variable in condition to apply animation on second button and because of that second button is animation and once animation is done its calling counter() and increasing counter. So you have to use separate variable to apply animation for second button something like this - https://stackblitz.com/edit/angular-ivy-ppymya?file=src%2Fapp%2Fapp.component.html