Angular2 * ngKartılan elemanların animasyonu için

Question

Giriş veya çıkış öğeleri (aşağıdaki resimde "Yeni öğe") için birçok animasyon öğreticisi gördüm, ancak diğer öğeler (Öğe 1 ve 2), itildi ayrı olarak genellikle yeni yerlerine ışınlanırlar.

ekli resimde gösterildiği gibi, güzel bir şekilde uzaklaşmaya diğer elemanları hareketlendirmek için bir yolu var mı?

Answer 1

Bunu elde etmek için angular2 animation API kullanabilirsiniz.

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

Plunker Example Cevabınız ı ihtiyaç vardı neredeyse ne BrowserAnimationsModule