如何在Angular中動畫* ngFor？

Question

我需要動畫一個ngFor列表，因爲它被填充和顯示。每個元素都應該有一個轉換，比如something like this。

我該怎麼做？

Answer 1

它有幾個問題，因爲ngFor做了一些冗餘添加/刪除引起進行動畫處理的項目，其不應該：

import {Component} from 'angular2/core'; 
import { Component, Directive, OnDestroy, Input } from 'angular2/core'; 

@Component({ 
    selector: 'my-app', 
    template: `<div (click)="$event.preventDefault()"> 
     <button type="button" (click)="pushItem()">Push</button> 
     <button type="button" (click)="removeItemLast()">Remove Last</button><br/> 
     <button type="button" (click)="unshiftItem()">Unshift</button> 
     <button type="button" (click)="removeItemFirst()">Remove First</button><br/> 
     <ul> 
      <li class="my-animation" *ngFor="#item of items"> 
      {{item.title}} 
      </li> 
     </ul> 
     </div>` 
}) 
export class AppComponent { 
    private count:number = 1; 
    public items: Array<any>; 
    constructor() { 
    console.clear(); 
    this.items = []; 
    this.items.push(this.newItem()); 
    this.items.push(this.newItem()); 
    } 
    pushItem() { 
     this.items.push(this.newItem()); 
    }, 
    removeItemLast() { 
     if(this.items.length > 0) this.items.splice(this.items.length - 1, 1); 
    }, 
    unshiftItem() { 
     this.items.unshift(this.newItem()); 
    }, 
    removeItemFirst() { 
     if(this.items.length > 0) this.items.splice(0, 1); 
    }, 
    newItem() { 
     return {title: 'Item' + this.count++}; 
    } 

} 

@keyframes MyAnimation { 
    0% { 
    padding-left: 100px; 
    } 
    100% { 
    padding-left: 0px; 
    } 
} 

.my-animation { 
    animation: MyAnimation 1s; 
} 

Plunker example (RC.x)從https://github.com/angular/angular/issues/7239演示問題。

更新

這被固定在很久以前

工作Plunker example (2.4.x)

Answer 2

有現在guide to Angular's animation system。如果我們想要做一些奇特的事情，這會有所幫助，比如在組件初始化之後添加的元素的動畫，而不是已經存在的元素。我已經修改了以前的答案，以Angular 2的方式進行操作。

Plunker：http://plnkr.co/edit/NAs05FiAVTlUjDOZfEsF?p=preview

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

@Component({ 
    selector : 'my-app', 
    animations: [ 
     trigger('growShrinkStaticStart', [ 
      state('in', style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', 'margin-top': '*', 'margin-bottom': '*' })), 
      transition('* => void', [ 
       style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', 'margin-top': '*', 'margin-bottom': '*' }), 
       animate("0.5s ease", style({ height: '0', 'padding-top': '0', 'padding-bottom': '0', 'margin-top': '0', 'margin-bottom': '0' })) 
      ]), 
      transition('void => false', [ 
       /*no transition on first load*/ 
      ]), 
      transition('void => *', [ 
       style({ height: '0', 'padding-top': '0', 'padding-bottom': '0', 'margin-top': '0', 'margin-bottom': '0' }), 
       animate("0.5s ease", style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', 'margin-top': '*', 'margin-bottom': '*' })) 
      ]) 
     ]) 
    ], 
    template : `<div (click)="$event.preventDefault()"> 
     <button type="button" (click)="pushItem()">Push</button> 
     <button type="button" (click)="removeItemLast()">Remove Last</button><br/> 
     <button type="button" (click)="unshiftItem()">Unshift</button> 
     <button type="button" (click)="removeItemFirst()">Remove First</button><br/> 
     <ul style="background: light-blue"> 
      <li *ngFor="let item of items" 
      [@growShrinkStaticStart]="animationInitialized.toString()" 
      (@growShrinkStaticStart.done)="animationInitialized = true" 
      style="background-color:pink; border:1px dashed gray; overflow:hidden"> 
      <h3>{{item.title}}</h3><p>{{item.description}}</p> 
      </li> 
     </ul> 
     <div>Footer</div> 
     </div>` 
}) 
export class AppComponent 
{ 
    private count: number = 1; 
    public items: Array <{ title: string, description: string }> ; 
    private animationInitialized: boolean = false; 

    constructor() { 
     this.items = []; 
     this.items.push(this.newItem()); 
     this.items.push(this.newItem()); 
    } 

    pushItem() { 
     this.items.push(this.newItem()); 
    } 

    removeItemLast() { 
     if (this.items.length > 0) 
      this.items.splice(this.items.length - 1, 1); 
    } 

    unshiftItem() { 
     this.items.unshift(this.newItem()); 
    } 

    removeItemFirst() { 
     if (this.items.length > 0) 
      this.items.splice(0, 1); 
    } 

    newItem() { 
     let d: string = ""; 
     let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz. ! ? "; 

     for (let i = 0; i < Math.floor(Math.random() * 50000); i++) 
      d += possible.charAt(Math.floor(Math.random() * possible.length)); 

     return { title : 'Item' + this.count++, description: d }; 
    } 
}