CODEWITHSUNDEEP
javascriptangularcss-animationsangular6angular-animations
Joniras
Joniras

Reputation: 1336

Angular Animation which creates short highlight

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

Upvotes: 6

Views: 2656

Answers (1)

Eliseo
Eliseo

Reputation: 58099

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")

Some like

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

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

trigger the animation if you make a

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

See that you needn't declare "value" in .ts

Upvotes: 1

Related Questions