Angular动画，可产生短亮

Question

问题

我最近想在短时间内用Angular动画突出显示一个Element。但是我没有找到一种没有状态的方法。所以这就是我想出的：

临时解决方案

animations: [
    trigger('highlightRed', [
      transition('*=>hasError', animate('2000ms', keyframes([
        style({backgroundColor: 'initial', boxShadow: 'none', offset: 0} ),
        style({backgroundColor: '#ff5c4c', boxShadow: '0 0 5px #ff5c4c', offset: 0.1} ),
        style({backgroundColor: 'initial', boxShadow: 'none', offset: 1} ),
      ])))
    ])
  ]

...
...

public showError(){
   this.errorState = "hasError";
}

<span [@highlightRed]="errorState" (@highlightRed.done)="errorState = ''">

StackBlitz Demo

问题

使用Angular（-Animations）甚至可以使用这种动画吗？还是我必须使用老式的CSS动画？我如何理想地触发它们？

版本

Angular 7

Answer 1

我对Angular的过渡了解不多，但是我知道Angular在“某些”更改时会触发动画。当显示某些内容或变量更改时，某些内容会发生更改。

有点像

  <div [@highlightRed] >..</div>

  transition('void=>*', animate(2000,, keyframes([..])),

在组件的第一个位置创建过渡（或者如果您具有* ngIf =“ condition”）

有点像

  <div [@highlightRed]="value" >..</div>

  transition('void=>*', animate(0)),
  transition('*=>*', animate(2000,, keyframes([..])),

触发动画

  <button (click)="value=!value">click</button>

请注意，您无需在.ts中声明“值”