Angular中如何禁用CSS动画初始触发并在counter变化时重触发老虎机动画

• 你的CSS动画只要绑定了animation-name的元素插入DOM时就会自动触发，初始设置animation-duration:0s只会让首次动画瞬间执行完毕，后续再修改时长也不会重新触发已完成的动画。
• 当前动画没有重置状态的逻辑，单次执行完毕后margin-top已经被固定为-7em，就算再次触发动画也不会有滚动效果。

推荐用动态类名控制的方案，改造成本最低：

1. 调整HTML结构 #

移除默认的slot动画类，避免初始加载自动触发：

<ul class="digits" #digits>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>{{ counter }}</li>
</ul>

2. 保留原有CSS逻辑 #

不用修改animation-duration默认值：

.digits {
  float: left;
  list-style-type: none;
  font-size: 1em;
  line-height: 1em;
  padding: 2px 4px;
  margin-top: 0em;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

.slot {
  animation-name: slot;
}

@keyframes slot {
  100% {
    margin-top: -7em;
  }
}

3. 新增动画触发逻辑 #

在修改counter的业务逻辑里，通过先移除类、触发重排、再加回类的方式重新触发动画：

// 修改counter后调用该方法触发动画
triggerAnimation() {
  const dom = this.element.nativeElement;
  dom.classList.remove('slot');
  // 读取offsetWidth强制触发浏览器重排，重置元素状态
  void dom.offsetWidth;
  dom.classList.add('slot');
}

如果不想直接操作DOM，也可以用Angular的NgClass指令绑定类名状态：

<!-- 模板绑定类名 -->
<ul class="digits" [class.slot]="isPlaying" #digits>

// 组件逻辑
updateCounter() {
  // 你的counter修改逻辑
  this.counter += 1;
  this.isPlaying = false;
  // 等待视图更新后开启动画
  setTimeout(() => this.isPlaying = true, 0);
}

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