【问题标题】：Angular Animation which creates short highlight角动画创建短亮点
【发布时间】：2019-03-23 09:16:19
【问题描述】：

问题

我最近想用 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 Demo

问题

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

版本

角度 7

【问题讨论】：

究竟是什么问题？如果你问我，它工作得很好......
@smnbbrv 他想在不使用状态的情况下这样做，我猜（But i did not find a way to do it without a state）。对我来说，无论如何，最好切换一个css类并单独处理动画，这样你就可以在不需要状态的情况下触发动画。角度动画有不同的用途。我认为像[class.hasError]="hasError" 这样的东西在这里最快（只要css中的hasError提供动画）
@briosheje 谢谢，但是角度动画都是关于状态的。你要么使用这个，要么使用old-school css。那里有数百万个 CSS 动画示例，那么还有什么问题呢？
@smnbbrv 我同意你的观点，这只是为了提出问题的重点（正如他所提到的，他找到的解决方案有效，但这不是他的想要）。
我认为我想出的这个解决方案很脏，所以我认为我可能缺少一些东西，并且我可以使用一些功能来减少它的脏。 css 类的想法和我已经有的一样......

标签： javascript angular css-animations angular6 angular-animations

【解决方案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 中声明“值”

【讨论】：

这仅适用于页面上有一个元素必须突出显示并且只能通过 html 中的同一组件触发的情况。非常有限...