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