Angular 5中的动画列表

在列表中添加和删除项目时,在Angular 5中创建了一个动画。

添加项目时,它会从顶部显示,缓慢放入并放置在列表中;删除项目时,该项目会缓慢移出到顶部并消失。我试图解决的问题是,当一个项目被删除时,它会很好地、缓慢地消失,然后列表中的其余项目就会捕捉到。我需要剩下的物品平稳移动,而不是抓拍。我该怎么做?

这是我的代码:

应用程序。组成部分输电系统

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate, group } from '@angular/animations'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('itemAnim', [
      transition(':enter', [
    style({ transform: 'translateY(-20%)' }),
    animate(500)
  ]),
  transition(':leave', [
    group([
          animate('0.1s ease', style({ transform: 'translateY(-20%)' })),
          animate('0.5s 0.2s ease', style({ opacity: 0 }))
        ])
      ])
    ])
  ]
})
export class AppComponent {
  title = 'Item';
  items:string[]=[];
  i=0;
  addItem(){
    this.items.push(this.title+this.i++);
  }
  removeItem(){
    this.items.shift();
  }
}

应用程序。组成部分html

<button (click)="addItem()">Add</button>
<button (click)="removeItem()">Remove</button>
<br/>
<ul>
  <li [@itemAnim]="items.length" *ngFor="let item of items">
    {{item}}
  </li>
</ul>

Click here