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

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>

how/what 传递给函数，以便 state 不会针对所有列出的项目进行更改。

附带问题，如何改进折叠和展开的动画代码

以上是状态为expand

时

当状态为 shrink 时，可以注意到段落的开头也是 collapsed/covered... 如何制作动画以从特定点展开和折叠到特定点！

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');  
}

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

How to trigger animation for a specific item and not all item in a list

ionic3

angular