创建短亮点的角度动画

Question

问题

我最近想用 Angular 动画简短地突出显示一个元素。但是我没有找到没有状态的方法。所以这就是我想出的：

临时解决方案

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 演示

题

这种类型的动画甚至可以使用 Angular (-Animations) 还是我必须使用老式 css 动画，我将如何理想地触发它们？

版本

角 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 中声明“值”