How do you repeat an animation on click in angular?

Question

new to angular animations here... I want to repeat a simple fade in animation on button click for two images. Each time the button is clicked, I want the old images to fade out and new images to fade in. Currently, after first click, images fade in. After second click, images fade out. I would like fade out and in to happen every click.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [  
  trigger('fade', [
    state('startRound', style({opacity:1})),
    state('endRound', style({opacity:0})),
    transition('* <=> *',[
      animate(500)
    ])
  ])
]
})
export class AppComponent  {
  
  public state:string = 'endRound';

  changeState(){
      this.state = this.state == 'startRound' ? 'endRound' : 'startRound';     
  }

  onClick(){
  this.changeState();
  }

}

<p>
  <img src="https://media.istockphoto.com/vectors/football-grunge-background-vector-id985653890" [@fade]=state>
  <img src="https://media.istockphoto.com/vectors/football-grunge-background-vector-id985653890" [@fade]=state>
</p>
<button (click)="onClick()">Click Me</button>

https://stackblitz.com/edit/angular-ivy-fzpmwm?file=src/app/app.component.ts

Thanks

Eliseo · Accepted Answer · 2020-09-23 19:41:49Z

1

it's better your state variable to be a boolean

animations: [  
  trigger('fade', [
    state('false', style({opacity:1})),
    state('true', style({opacity:0})),
    transition('* <=> *',[
      animate(500)
    ])
  ])

 ...
 public state:boolean = false;

 changeState(){
    this.state = !this.state
 }

So you can write [@fade]="state" and [@fade]="!state", else you need use two variables

<img src="..." [@fade]="state">
<img src="..." [@fade]="!state">

Your forked stackblitz

Update if we want we can use tiggers, that,e.g. if our images are

<img src="..." [@fade]="state" (@fade.done)="state && state=!state">
<img src="..." [@fade]="state">

At first our state is false (opacity=1), when click state becomes true, so make the animation to get (opacity=0), after finished the animation, as state is true, execute state=!state and animation beging to get (opacity=1), after finished this last animation, states is false and don't repeat the animation

I updated the stackblitz

edited Sep 23, 2020 at 19:41

answered Sep 22, 2020 at 6:56

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

roonz11 Over a year ago

Thanks Eliseo. Not quite what I'm looking for... I want both images to fade out and fade back in on button click. I was able to get it working using setTimeout but not sure if that is correct. ts onClick(){ this.changeState(); setTimeout(()=>{ this.changeState(); }, 500); }

Eliseo Over a year ago

you can use (@fade.done)="state && state=!state" Always is better wait Angular finish the animation than use a setTimeout -see the updated answer and the stackbliz updated-

jbright Over a year ago

say I want to animate a transform:

trigger('fade', [     state('true', style({transform: 'translateX(100%)'})),     transition('* => *',[       animate(500)     ])   ])

How would I be able to retrigger the animation on click to then translate a further 100%?

Eliseo Over a year ago

@bongoSLAP, when you use an animation you write, e.g.[@fade]="state". You should change the variable "state" to the animation start. You has fixed the "state" to true, so the only you can do is put the variable state to "false", and inside a setTimeout() put the variable to "true". NOTE: You can defined your animation without state, so the only you neeed is change the value of the variable

Collectives™ on Stack Overflow

How do you repeat an animation on click in angular?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related