如何触发特定项目的动画而不是列表中的所有项目

Question

我试图仅为点击动画制作动画而不动画其余部分

@Component({
  selector: \\\\\
  templateUrl: \\\\

animations: [
 trigger('showFull', [
   state('shrink', style({
     height: '50px'
   })),
   state('expand', style ({
     height: '*'
   })),
   transition('shrink <=> expand', animate('300ms ease-in'))
 ])
]
})
///

export class myComp {
    state: string = 'shrink';

}

toggleExpansion(){
    this.state = (this.state === 'shrink' ? 'expand' : 'shrink');  
}

html的：

<div *ngFor="let item of items">
   <ion-item [@showFull]="state" (click)="toggleExpansion()">
     {{item.description}}
   </ion-item>
</div>

如何/传递给该函数的内容，以便state不会对所有列出的项目进行更改。

关于问题，如何改进动画代码以折叠和展开

以上是状态为expand

并且当状态为shrink时，可以注意到段落的开头也被折叠/覆盖...如何动画以扩展和折叠到特定点！

Answer 1

从服务器端获取对象时，可以在项目中添加属性状态。

this.items.forEach(item => item.state = "shrink");

在你的HTML中：

<div *ngFor="let item of items">
   <ion-item [@showFull]="item.state" (click)="toggleExpansion(item)">
     {{item.description}}
   </ion-item>
</div>

最后在组件中，

toggleExpansion(item:any){
    item.state = (item.state === 'shrink' ? 'expand' : 'shrink');  
}