Angular Animation which creates short highlight

Question

Problem

I recently wanted to shortly highlight an Element with Angular animations. But i did not find a way to do it without a state. So here is what i came up with:

Temporary Solution

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

Question

Is this type of animation even possible with Angular (-Animations) or do i have to use old-school css animations and how would i trigger them ideally ?

Versions

Angular 7

@smnbbrv he wants to do that without using the state, I guess (`But i did not find a way to do it without a state`). To me, anyway, it would be better to toggle a css class and handle the animation separately, so that you can trigger the animation without needing a state. Animations in angular serves different purposes. Something like `[class.hasError]="hasError"` would be the fastest here, I think (as long as hasError in css provides the animation) — briosheje, Dec 17 '18 at 13:43
@briosheje thanks, however angular animations are all about the state. Either you use this or `old-school css`. There are millions of CSS animation examples out there, so still what is the question then? — smnbbrv, Dec 17 '18 at 13:44
@smnbbrv I Do agree with you, it was just to bring up the point of the question (as he mentioned, the solution he found **works**, but it's not what he wants). — briosheje, Dec 17 '18 at 13:46
I thought this solution i came up with is pretty dirty so i thought there might be something i'm missing and there is some functionality i could use that makes it less dirty. The idea with the css class is kind of the same i already have... — Joniras, Dec 17 '18 at 13:58
@Joniras it sounds like it's the proper / fastest way. Angular animations were built on states, so not using states doesn't make them useful in your case. Is there any reason you don't like the `[class]` approach? other than having to write the css animation on... css. — briosheje, Dec 17 '18 at 14:45
@briosheje the css approach is almost the same as mine (i also have to remove the class afterwards). So either i have to write the css animation or i have to write the animation in angular. But it is a valid alternative ofc. — Joniras, Dec 18 '18 at 09:38
@Joniras what is so called *dirty* here? What would you like to change? What exactly bothers you? — smnbbrv, Dec 18 '18 at 09:50
@smnbbrv It bothers me that i have to remove the attribute which either triggers the css- or the angular animation. And i have to set this animation `[@highlightRed='....']` on every element on its own. Same with the css animation. I thought there maybe is a cleaner/easier/shorter way to do it. But if theres not, then ill accept my fate. — Joniras, Dec 18 '18 at 09:58

score 1 · Answer 1 · answered Dec 20 '18 at 22:56

I don't know much about transitions Angular, but I understand that Angular trigger an animation when "something" change. Something change, when some is displayed or when a variable change.

Some like

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

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

create a transition at first of the component (or if you have a *ngIf="condition")