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 done
callback 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?
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 callingcounter()
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