如何觸發動畫特定項目，而不是所有的項目列表中的

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