Angular 角度6动画打开：递增和：递减未正确触发

试着让我的头脑围绕着一个项目列表的动画，在这个列表中，用户可以上下移动项目，一次一个，一步一个

当我开始谈论

：递增

和

：递减

选择器值时，我感到非常兴奋。然而，我似乎无法让这个工作

闪电战开始了：

我的代码的要点是：

animations: [
  trigger('move', [
    transition(':decrement', [style({ opacity: 0 }), animate('5s ease', style({ opacity: 1 }))]),
    transition(':increment', [style({ transform: 'scale(0.5)' }), animate('5s ease', style({ transform: 'scale(1)' }))]),
  ])
],

我的html：

<div [@move]="index" *ngFor="let item of items; let index = index;">
  <span (click)="moveUp(item)">^</span>&nbsp;<span (click)="moveDown(item)">v</span> {{index}} : {{item}} 
</div>

^v{{index}}:{{item}

结果很奇怪：

首先，看起来只有

：increment

转换开始（缩放），而不是

：decreation

（不透明度）。 其次，似乎每个索引只触发一次转换

这是过渡/动画库的错误吗

还是我只是用错了/理解错了

更新

部分问题似乎与

*ngFor

有关。如果我添加一个子

div

元素并设置它的动画，情况会更好，但不是100%

两个问题仍在发生：

首先，似乎

：increment

按预期工作，但

：decreation

需要几轮才能工作

其次，我似乎必须使用一个内部

div

元素。我似乎无法将动画放在

ng容器上

。这有点烦人，因为我不喜欢添加额外的

div

元素来破解某些东西

---

因此，我们发现了一些有趣的事情，

*ngFor

元素上的转换触发器似乎是罪魁祸首。如果我简单地将所有内容向下移动一个级别，并将转换应用于子

div

元素，它就可以工作了。。。敬请期待！恭喜！看来你已经解决了这个问题。您还有其他问题吗？您好@GerardSans，谢谢您的关注（也谢谢您的精彩文章）。我仍然有我在更新中发布的两个问题，在我点击某个特定项目的前几次，它似乎不起作用。这可能是一个bug，我会在angular上发布它。第二个问题（需要创建一个子

div

元素）可能是我对如何使用动画的误解。在过去的几天里，我不得不专注于实际的业务逻辑，而不是动画。。。