Angular2 * ng押し出された要素のアニメーション

Question

私は、要素を入力または放置するための多くのアニメーションチュートリアル（下の画像の「新しい要素」）を見てきましたが、残りの要素（要素1および2）離れて通常は新しい場所に移動するだけです。

添付画像に示されているように、きれいに離れて移動するために他の要素をアニメーション化する方法はありますか？

Answer 1

これを実現するには、angular2 animation APIを使用できます。

Plunker Example

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div class="container"> 
     <div *ngFor="let item of items; let i = index" class="item" (click)="remove(i)" 
     [@anim]="item.state"> 
     {{ item.name }} 
     </div> 
    </div> 
    <div class="aside"> 
     <button (click)="push()">Push</button> 
    </div> 
    `, 
    animations: [ 
    trigger('anim', [ 
     transition('* => void', [ 
      style({ height: '*', opacity: '1', transform: 'translateX(0)', 'box-shadow': '0 1px 4px 0 rgba(0, 0, 0, 0.3)'}), 
      sequence([ 
      animate(".25s ease", style({ height: '*', opacity: '.2', transform: 'translateX(20px)', 'box-shadow': 'none' })), 
      animate(".1s ease", style({ height: '0', opacity: 0, transform: 'translateX(20px)', 'box-shadow': 'none' })) 
      ]) 
     ]), 
     transition('void => active', [ 
      style({ height: '0', opacity: '0', transform: 'translateX(20px)', 'box-shadow': 'none' }), 
      sequence([ 
      animate(".1s ease", style({ height: '*', opacity: '.2', transform: 'translateX(20px)', 'box-shadow': 'none' })), 
      animate(".35s ease", style({ height: '*', opacity: 1, transform: 'translateX(0)', 'box-shadow': '0 1px 4px 0 rgba(0, 0, 0, 0.3)' })) 
      ]) 
     ]) 
    ]) 
    ] 
}) 
export class AppComponent { 
    items: any[] = [ 
    { name: 'Element 1' }, 
    { name: 'Element 2' } 
    ]; 

    push() { 
    this.items.splice(1, 0, { name: 'New element', state: 'active' }); 
    } 

    remove(index) { 
    this.items.splice(index, 1); 
    } 
} 

BrowserAnimationsModule