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中的动画列表

1 个答案: