Angular 2+中在removeStyle与addStyle间触发变更检测实现动画重放

核心原因 #

你遇到的问题本质是浏览器的样式批量更新机制导致的，和Angular变更检测没有直接关系：同一同步执行上下文内的所有DOM样式操作，会被浏览器合并到同一次渲染队列更新，你先后移除、添加同一个动画样式的操作，在浏览器最终计算样式时会被判定为没有变化，自然不会触发动画重放。

appRef.tick()无效的原因是它仅处理Angular框架层面的模板绑定变更检查，不会打断浏览器的样式合并逻辑，你两次调用Renderer2操作DOM的代码还是在同一个同步上下文中执行，浏览器依然会合并样式变更。

方案1：强制触发浏览器重排（最小改动，无异步副作用） #

不需要用setTimeout，只需要在移除样式后读取一次元素的布局属性，浏览器为了返回准确的布局值，会立刻应用之前的样式变更，打断样式合并逻辑，再添加动画样式就能被正确识别：

addAnimation(animationName: string): void {
  this.renderer.removeStyle(this.animate.nativeElement, 'animation');
  // 读取offsetWidth强制触发重排，无额外依赖，执行效率远高于setTimeout
  void this.animate.nativeElement.offsetWidth;
  this.renderer.setStyle(this.animate.nativeElement, 'animation', animationName);
}

加void是为了消除TS Lint的未使用返回值警告，不加也可以正常运行。

方案2：使用Angular官方动画模块（规范推荐，适合复杂场景） #

如果你的项目动画场景较多，更推荐使用Angular原生的@angular/animations模块实现，完全不需要手动操作DOM，也不存在样式合并的问题：

1. 首先在组件装饰器中定义可重放的动画触发器：

import { Component, ElementRef, ViewChild } from '@angular/core';
import { trigger, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  animations: [
    trigger('replayAnimation', [
      // 每次触发值变化时，执行对应动画
      transition('* => *', [
        animate('{{animDuration}} {{animName}}')
      ], { params: { 
        animDuration: '1s', // 可自定义动画时长
        animName: 'none' 
      } })
    ])
  ]
})

2. 模板中绑定动画触发器：

<!-- 绑定动画触发器到目标元素 -->
<div [@replayAnimation]="animTrigger" #animate></div>
<button (click)="addAnimation('animation1')">触发动画</button>

3. 组件中实现触发逻辑：

export class YourComponent {
  @ViewChild('animate') animate!: ElementRef;
  // 触发器值，每次更新就会自动触发动画重放
  animTrigger = 0;

  addAnimation(animationName: string): void {
    this.animTrigger++;
  }
}

该方案完全符合Angular的开发规范，不需要手动操作DOM，也没有任何异步副作用，同时支持更复杂的动画组合、回调等能力。

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