0

我的组件的模板呈现一个列表：

<div class="row">
  <div *ngFor="let m of activeModules" [@enterAnimation]>
    {{ m.name }}
  </div>
</div>

该组件对其进行动画处理

@Component({
  selector: 'app-client-detail',
  templateUrl: './client-detail.component.html',
  styleUrls: ['./client-detail.component.scss'],
  animations: [

    trigger(
      'enterAnimation', [
        transition(':enter', [
          style({ opacity: 0 }),
          animate('1000ms', style({ opacity: 1}))
        ]),
        transition(':leave', [
          style({ opacity: 1 }),
          animate('1000ms', style({ opacity: 0}))
        ])
      ]
    )
  ]
})
export class ClientDetailComponent implements OnInit {
   activeModules = [{ name: 'modulo 1'}, { name: 'modulo 2'}];
}

这很好用，“div”从不透明度过渡。如果我做这样的事情：

ngOnInit() {
  Observable.timer(2000).subscribe(() => {
    this.activeModules =  [{ name: 'modulo 1'}, { name: 'modulo 3'}, { name: 'modulo 2'}];
}

activeModules 的数组被更新，模板再次呈现带有过渡的列表。我的问题是我只需要数组中的“新”项（在本例中为中间项）即可进行转换。可能吗？

4

1 回答 1

1

当然，您只需要推送您的项目而不是再次创建您的数组。

让我们为此创建一个函数：

pushAt(arr, index, item) {
  arr.splice(index, 0, item); 
}

现在你可以

ngOnInit() {
  Observable.timer(2000).subscribe(() => this.pushAt(this.activeModules, 1, { name: 'Modulo 2' }));
}

编辑也许您可以尝试使用自定义 trackby 功能：

customTrackBy(index, item) { return index; }

在您的 HTML 中

<div *ngFor="let m of activeModules; trackBy: customTrackBy;" [@enterAnimation]>
于 2018-01-16T14:41:51.507 回答