角度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

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

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

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

2. 更新您的模板：

將[@enlarge]='state'為[@enlarge]='job.state'

3. 更新您的enlarge()方法：

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

Answer 2

在一些外部幫助和研究下，我找到了解決問題的方法。

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>