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