如何解决您如何在点击角形时重复播放动画?
这里是角度动画的新手... 我想对两个图像的按钮单击重复一次简单的动画淡入。每次单击按钮时,我希望旧图像淡出而新图像淡入。 当前,第一次单击后,图像会淡入。第二次单击后,图像会淡出。我希望淡出然后每次点击都会发生。
@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
谢谢
解决方法
最好将状态变量设置为布尔值
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">
更新,如果我们希望可以使用tiggers,例如如果我们的图片是
<img src="..." [@fade]="state" (@fade.done)="state && state=!state">
<img src="..." [@fade]="state">
首先,我们的状态为false(opacity = 1),当点击状态变为true时,使动画获得(opacity = 0),动画完成后,由于state为true,所以执行state =!state和animation开始获取(opacity = 1),完成最后一个动画后,状态为false,请勿重复动画
我更新了堆叠闪电战
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。