angular 如何在点击时重复动画？

Question

angular 动画的新手... 我想在按钮单击时为两个图像重复一个简单的淡入动画。每次单击按钮时，我都希望旧图像淡出而新图像淡入。目前，第一次点击后，图像淡入。第二次点击后，图像淡出。我希望每次点击都能淡出和淡入。

@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

谢谢

Answer 1

你的状态变量最好是布尔值

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
 }

所以你可以写 [@fade]="state" 和 [@fade]="!state"，否则你需要使用两个变量

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

Your forked stackblitz

Update 如果我们愿意，我们可以使用 tiggers，例如如果我们的图片是

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

一开始我们的state是false(opacity=1)，当click state变为true时，制作动画得到(opacity=0)，动画结束后，state为true，执行state=!state和动画开始获得（不透明度=1），完成最后一个动画后，状态为 false 并且不重复动画

我更新了 stackblitz

angular 如何在点击时重复动画？

How do you repeat an animation on click in angular?

angular

animation

angular-animations