Блог

У меня есть два элемента, использующие одну и ту же анимацию animate , один элемент использует триггер (@animate.done) для выполнения некоторой логической пост-анимации. Моя проблема в том, что 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

Есть ли способ изолировать обратный вызов для элемента, для которого он используется?

Вы меняете this.open переменную с помощью первой кнопки и используете ту же переменную в условии, чтобы применить анимацию ко второй кнопке, и из-за этого вторая кнопка является анимацией, и как только анимация выполнена, она вызывает counter() и увеличивает счетчик. Поэтому вам нужно использовать отдельную переменную, чтобы применить анимацию для второй кнопки примерно так: https://stackblitz.com/edit/angular-ivy-ppymya?file=src/app/app.component.html