*ngFor的角动画仅适用于单击的值，而不是所有元素
*ngFor的角动画仅适用于单击的值，而不是所有元素
提问于 2019-02-05 04:07:29
当单击使用*ngFor生成的特定div时，我希望应用动画。当前，当单击时，它适用于每个div。我怎样才能做到这一点？
animations: [
trigger('changeDivSize', [
state('initial', style({
width: '30px',
height: '30px',
opacity: '0.5',
margin: '10px'
})),
state('final', style({
width: '32px',
height: '32px',
opacity: '1',
margin: '10px'
})),
transition('initial<=>final', animate('200ms')),
transition('final=>initial', animate('200ms'))
]),]
changeState() {
this.currentState = this.currentState === 'initial' ? 'final' : 'initial';
} <div class="row">
<div *ngFor="let group of groups" class="col-1">
<div (click)="changeState()" [@changeDivSize]=currentState [ngStyle]="{'background-color': group.colorCode}"></div>
</div>回答 2
Stack Overflow用户
回答已采纳
发布于 2019-02-05 05:17:55
changeState(index) {
this.currentState[index] = this.currentState[index] === 'initial' ? 'final' : 'initial';
}最好如上面所示，取组内各项目的数组currentState。
然后，对组的单个元素使用currentStatei。
<div class="row">
<div *ngFor="let group of groups, index as i" class="col-1">
<div (click)="changeState(i)" [@changeDivSize]=currentState[i] [ngStyle]="{'background-color': group.colorCode}"></div>
</div>希望这能有所帮助。
Stack Overflow用户
发布于 2019-02-05 04:49:12
您可以将元素的索引与*ngFor一起使用，以便为每个元素提供一个单独的currentState值，这样动画就可以处理单个元素。
<div *ngFor="let group of groups;let i = index" class="col-1">
<div (click)="changeState(i)"
[@changeDivSize]=group.currentState
[ngStyle]="{'background-color': group.colorCode}">
</div>
</div> public changeState(index: number): void {
console.log(index)
this.groups[index].currentState =
(this.groups[index].currentState === 'initial') ? 'final' : 'initial';
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54527571
复制相关文章
相似问题
腾讯云开发者
