Javascript 在Angular 5中设置列表动画

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

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

这是我的代码：

应用程序组件.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>

添加
去除




{{item}}

这是正在工作的plunker

---

您可以使用

元素的高度，因此当您将其更改为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，以使其更加明显。

请再次查看plunkr，我添加了引导样式，它打破了您的解决方案。这是因为引导类为元素添加了一些填充（10px 15px 10px 15px）。因此，解决方案是在转换中也更改填充：transform:'translateY（-20%），'height'：'0px'，'padding'：'0px 15px 0px 15px'}或transform:'translateY（-20%），'height'：'0px'，'padding'：'0px'}