Angular动画问题：点击其他元素触发非绑定元素的@animate.done回调

哎，这个问题我之前做项目时也踩过坑！核心原因是你给两个按钮用了同名的动画触发器（@animate）。在Angular里，动画事件是靠触发器名称来广播的，不管哪个元素触发了这个名称的动画完成事件，所有绑定了(@animate.done)的回调都会被唤起，所以点第一个按钮时，第二个的计数器也会涨。

下面给你三个可行的解决方法，按需选就行：

方法一：给每个元素用独有的触发器名称 #

这是最直观的做法，给两个按钮的动画触发器分别起不同的名字，让它们的事件完全隔离开：

首先在组件的动画配置里，复制一份触发器并改个名，比如animateBtn1和animateBtn2：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  animations: [
    trigger('animateBtn1', [
      state('open', style({ /* 你的打开状态样式 */ })),
      state('closed', style({ /* 你的关闭状态样式 */ })),
      transition('open <=> closed', [animate('300ms ease-in-out')])
    ]),
    trigger('animateBtn2', [
      state('open', style({ /* 和上面一致的打开状态样式 */ })),
      state('closed', style({ /* 和上面一致的关闭状态样式 */ })),
      transition('open <=> closed', [animate('300ms ease-in-out')])
    ])
  ]
})

然后在模板里对应使用这两个触发器，第二个按钮的回调也绑定到animateBtn2.done：

<button [@animateBtn1]="open === 'open' ? 'open': 'closed'" (click)="toggle()">one</button>
<br><br>
<button [@animateBtn2]="open === 'open'? 'open': 'closed'" (@animateBtn2.done)="counter()" (click)="toggle()">two: animation.done called: {{count}} </button>

这样两个按钮的动画事件就完全独立了，点第一个绝对不会触发第二个的回调。

方法二：通过事件参数判断触发元素 #

如果不想重复写动画代码，咱可以在回调里做个“身份校验”——通过动画事件参数拿到触发元素，判断是不是目标按钮再执行逻辑：

先给第二个按钮加个模板引用变量，方便在组件里获取它：

<button [@animate]="open === 'open' ? 'open': 'closed'" (click)="toggle()">one</button>
<br><br>
<button #targetBtn [@animate]="open === 'open'? 'open': 'closed'" (@animate.done)="counter($event)" (click)="toggle()">two: animation.done called: {{count}} </button>

然后在组件里引入AnimationEvent和ViewChild，拿到按钮元素后在回调里判断：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { AnimationEvent } from '@angular/animations';

@Component({
  // ...其他组件配置
})
export class AppComponent {
  @ViewChild('targetBtn') targetBtn!: ElementRef<HTMLButtonElement>;
  count = 0;
  open = 'closed';

  toggle() {
    this.open = this.open === 'open' ? 'closed' : 'open';
  }

  counter(event: AnimationEvent) {
    // 只有当触发动画的是目标按钮时，才加计数器
    if (event.element === this.targetBtn.nativeElement) {
      this.count++;
    }
  }
}

这种方式不用改动画定义，适合动画逻辑比较复杂、不想重复写的场景。

方法三：用动画参数传递唯一标识 #

还有一种更灵活的方式，给每个按钮的动画传个唯一的标识参数，在回调里根据参数判断要不要执行逻辑：

模板里给触发器传递带参数的配置：

<button [@animate]="{value: open === 'open' ? 'open': 'closed', params: {btnId: 'btn1'}}" (click)="toggle()">one</button>
<br><br>
<button [@animate]="{value: open === 'open'? 'open': 'closed', params: {btnId: 'btn2'}}" (@animate.done)="counter($event)" (click)="toggle()">two: animation.done called: {{count}} </button>

然后在组件的回调里检查参数里的btnId：

counter(event: AnimationEvent) {
  // 只有参数里的btnId是btn2时，才执行计数
  if (event.params?.btnId === 'btn2') {
    this.count++;
  }
}

这种方式既不用改触发器名称，也不用操作DOM，适合需要动态区分多个元素的场景。

内容的提问来源于stack exchange，提问作者kodeaben