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>

这是工作插件 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，让它更明显。

Angular 5 中的动画列表

Animating List in Angular 5

javascript

angular

angular-animations