Angular 9：动画未触发答案

【问题标题】：Angular 9: Animations Not TriggeringAngular 9：动画未触发
【发布时间】：2021-06-26 17:19:08
【问题描述】：

我有一个组件，其中包含几个组件。每个都有一个底层 job 对象。当recentlyEdited 对象上的recentlyEdited 标志为真时，我设置了一个动画触发器来显示脉冲效果。

即使标志设置正确，[@newIncomingJob] 动画也不会触发。我一直在密切关注 Angular 动画教程，所以我不确定为什么它不会触发。

job-line-animation.ts

import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';
    export function startPulse() {
        return trigger('newIncomingJob', [
      state('normal', style({ backgroundColor:"red"  })),
      state('updating', style({ backgroundColor: "white",height:"200px" })),
        transition('void => updating', [
        animate('5s 0s ease-in')
      ]),
      transition('updating => normal', [
        animate('5s 0s ease-in')
      ])
    ])
    }

job-list.component.html

<div *ngFor="let job of jobsFromBackend | async">
  <button (click)="testPulseAnimation(job)">Test Pulse Animation. Current State: {{job.recentlyEdited ? 'updating' : 'normal'}}</button>
<job-line
 [job]="job" 
[@newIncomingJob]="job.recentlyEdited ? 'updating' : 'normal'">
</job-line>
</div>
</mat-accordion>
</div>

job-list.component.ts

@Component({
  selector: 'job-list',
  templateUrl: './job-list.component.html',
  styleUrls: ['./job-list.component.css'],
  animations: [startPulse()]
})


export class JobListComponent implements OnInit {
/*
...
*/
testPulseAnimation(job): void {
      job.recentlyEdited=true;
    }
}

【问题讨论】：

标签： css angularjs animation angular-animations

【解决方案1】：

通过将 [@newIncomingJob]="job.recentlyEdited ? 'updating' : 'normal'" 添加到 job-line.component.html 中的顶级 HTML 标记解决了该问题

【讨论】：