Angular 6动画-从绝对位置到组件

Question

我有2个数组，我将项目从一个数组传递到另一个数组。
通过项目时，我希望它们具有动画效果。 在这里您可以测试代码：
https://stackblitz.com/edit/angular-s1wg3u?file=src%2Fapp%2Fapp.component.ts

在这里您可以看到我正在将topElements的内容传递给bottomElements。

能否请您解释一下如何对阵列之间的移动进行动画处理？ 坦克

@Component({
  selector: 'my-app',
  template: `
    <b>Top:</b><br />
    <item-container [list]="topElements" [style]="{'position' : 'absolute',top : '30px'}"></item-container>
    <b>Bottom:</b><br />
    <item-container [list]="bottomElements" ></item-container>
    <button (click)="click($event)">Move one by one to Bottom</button>
    `
})
export class AppComponent {
  topElements = ["Ron", "Ben", "Nir"];
  bottomElements = [];
  click(event) {
    this.bottomElements.push(this.topElements[0])
    this.topElements.splice(0, 1);
  }
}

@Component({
  selector: 'item',
  template: `<span [ngStyle]="style">{{name}}</span><br />`
})
export class ItemComponent {
  @Input() name;
  @Input() style;
}

@Component({
  selector: 'item-container',
  template: `<div>
      <item *ngFor="let i of list"  [style]="style"  [name]="i"></item><br /><br />
  </div>`
})
export class ItemContainerComponent {
  @Input() list = []
  @Input() style;
}