Angular 2/4爲數組內的一個項目添加動畫而不是所有項目

Question

我正在嘗試爲投資組合構建一些有意義的議案。目標是當用戶點擊工作項目時，該項目彈出併成長。要做到這一點，我相信我必須改變數組內部點擊元素的狀態，但是現在當我點擊它時，它會影響數組內部所有元素的所有狀態，這些狀態都是一起動畫的。任何人都可以解釋我發生了什麼以及如何解決？

portfolio.component.ts

import { Component } from '@angular/core'; 
import { trigger,style,transition,animate,keyframes,state,query,stagger } from '@angular/animations'; 

export class Job { 
    id: number; 
    title: string; 
} 

const JOBS: Job[] = [ 
    { id: 11, title: 'Item 1' }, 
    { id: 12, title: 'Item 2' }, 
    { id: 13, title: 'Item 3' }, 
]; 

@Component({ 
    selector: 'portfolio', 
    templateUrl: './portfolio.component.html', 
    styleUrls: ['./portfolio.component.css'], 
    animations: [ 
    trigger('enlarge', [ 
     state('small', style({ 
      height: '100px', 
     })), 
     state('large', style({ 
      height: '200px', 
      background: 'red', 
     })), 
     transition('small <=> large', 
     animate('1s ease-in')), 
    ]), 

    ] 
}) 

export class PortfolioComponent { 
    title = 'Portfolio'; 
    jobs = JOBS; 

    state: string = 'small' 

    enlarge() { 
     this.state = (this.state === 'small' ? 'large' : 'small'); 
    } 
} 

portfolio.component.html

<div class="list" 
*ngFor='let job of jobs' 
[@enlarge]='state' 
(click)="enlarge()"> 
    <div for="#">{{job.id}} - {{job.title}}</div> 
</div> 

Answer 1

隨着一些外部的幫助和研究，我想出解決我的問題。

portfolio.component.ts

import { Component } from '@angular/core'; 
import { trigger,style,transition,animate,keyframes,state,query,stagger } from '@angular/animations'; 

export class Job { 
    id: number; 
    title: string; 
    state: string; 
} 

@Component({ 
    selector: 'portfolio', 
    templateUrl: './portfolio.component.html', 
    styleUrls: ['./portfolio.component.css'], 
    animations: [ 
    trigger('enlarge', [ 
     state('small', style({ 
      height: '100px', 
      transform: 'translateY(0)', 
     })), 
     state('large', style({ 
      height: '200px', 
      transform: 'translateY(-300px)', 
      background: 'red' 
     })), 
    ]), 

    ] 
}) 

export class PortfolioComponent { 
    title = 'Portfolio'; 

    jobs = [ 
     { id: 11, title: 'Item 1', state: 'small' }, 
     { id: 12, title: 'Item 2', state: 'small' }, 
     { id: 13, title: 'Item 3', state: 'small' }, 
    ]; 

    enlarge(index) { 
     index.state = (index.state === 'small' ? 'large' : 'small'); 

    } 
} 

portfolio.component.html

<div class="list" 
*ngFor='let job of jobs' 
[@enlarge]='job.state' 
(click)="enlarge(job)"> 
    <div for="#">{{job.id}} - {{job.title}}</div> 
</div> 

Answer 2

目前您使用相同的變量的所有項目分配相同的狀態。你需要做的是爲每個項目分配不同的狀態。

1. 設置默認狀態爲所有項目：

   this.jobs = this.jobs.map((job) => { 
       job.state = "small"; 
       return job; 
   }); 
   

2. 更新您的模板：

設置[@enlarge]='state'到[@enlarge]='job.state'

更新您的enlarge()方法：

enlarge(index) { 
let job = this.jobs[index].state; 
job = (job === 'small' ? 'large' : 'small'); 
    }