Angular2 * ngDo animacji wypychanych elementów

Question

Widziałem wiele samouczków animacji dla elementów wchodzących lub wychodzących ("Nowy element" na poniższym obrazku), ale pozostałe elementy (element 1 i 2), które są wypychane oprócz zwykle po prostu teleportuj się do ich nowej lokalizacji.

Czy istnieje sposób, aby animować inne elementy odchodzić ładnie, jak przedstawiono w załączonym obrazu?

Answer 1

Możesz użyć angular2 animation API, aby to osiągnąć.

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

Nie zapomnij importować BrowserAnimationsModule