Angular 5 中的动画列表

Question

在 Angular 5 中添加和删除列表中的项目时创建动画。

添加项目时，它从顶部出现，慢慢缓入并放入列表中，当删除一个项目时，该项目缓慢缓出到顶部并消失。我试图解决的问题是，当一个项目被删除时，它会缓和缓慢并消失，然后列表中的剩余项目就会消失。我需要剩余的物品平稳移动而不是折断。我该怎么做？

这是我的代码：

app.component.ts

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

app.component.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>

这里是工作的 plunker Click here

Answer 1

您可以使用<li> 元素的高度，因此当您将其更改为 0px 以使其消失时，它会更平滑地移动下面的元素：

transition(':leave', [
   group([
      animate('0.5s ease', style({ transform: 'translateY(-20%)', 'height':'0px' })),
      animate('0.5s 0.2s ease', style({ opacity: 0 }))
   ])
])

我还将过渡持续时间从 0.1s 增加到 0.5s 以使其更加明显。