angular animation - changing the state without user interaction

Question

Hope someone can help me please - see this StackBlitz

What I want to achieve is a simple highlight effect where an element's background flashes a colour briefly and then fades back to FFF.

There are two buttons there just to show the different transitions, but what I want is to join them together in one method to make it flash and fade.

I also want keep the animation separate from the component because I'll want to re-use it.

So to change the states I thought I could just set the value of highlightState in form.component.ts to true, and then immediately set it back to false. Even though the two statements would execute almost immediately, I thought the longer transition from true to false would give the effect that I wanted. What actually happens is that I can't see anything

I tried using setTimeout(), and keeping the transitions the same in highlight.ts (just using <=> to toggle the states), but all that happens then is the highlight stays on.

I know that it's basic and I'm disappointed that I can't get it to work, but if you can help I'd really appreciate it.

Answer 1

I prefer to use keyframe animations. I think you missed that the animation should appear if element is in any state. For that * is used.

Here, * <=> * indicates that I don't care in what state element is, just perform animation.

DEMO

highlight.ts

export const highlight = trigger('highlight', [transition('* <=> *', useAnimation(
  animation(
    animate(
      '500ms 0s',
      keyframes([
        style({ background: '#FFFFFF' }),
        style({ background: '#ff0000' }),
        style({ background: '#FFFFFF' })
      ])
    )
  )
))]);