ngFor元素上的Angular 2动画bug

I recently started to play around Angular 2 and TypeScript. Everything was going smoothly till I hit Angular 2 animations. I know, they are easy, but I'm having a bug and it's really anoying.

我最近开始玩围绕Angular 2和TypeScript。一切顺利，直到我点击Angular 2动画。我知道，它们很容易，但我有一个错误，这真的很烦人。

Here is Plunker to show what's happening: http://plnkr.co/edit/0YsCgD0yUiIqIrTyuA5s?p=preview

这是Plunker展示正在发生的事情：http：//plnkr.co/edit/0YsCgD0yUiIqIrTyuA5s？p = preview

When element is added to the list, the animation will run without any problem. But on removing element from todolist, it will remove all elements and I don't know why. In JS, there are still those elements Angular just don't show them. The animation will run on every element instead of the one without index.

将元素添加到列表时，动画将运行没有任何问题。但是从todolist中删除元素时，它将删除所有元素，我不知道为什么。在JS中，仍有一些元素Angular只是不显示它们。动画将在每个元素上运行，而不是没有索引的元素。

Here is my animation:

这是我的动画：

    trigger('taskState', [

        state('void', style({
            opacity: 0,
            transform: 'translateX(50px)'
        })),
        transition('void => *', [
            animate('0.2s ease-out')
        ]),
        transition('* => void', [
            style({
                transform: 'scale(0)',
                height: 0
            }),
            animate('0.2s ease-in-out')
        ]),

        state('undone', style({ transform: 'scale(1)' })),
        state('done', style({ transform: 'scale(0.975)', opacity: '0.5' })),
        transition('undone <=> done', [
            animate('50ms ease-in-out')
        ])

    ])

1 个解决方案

#1

This question was solved by the newer versions of Angular. If anyone had the same issue, just update your Angular version.

这个问题是由更新版本的Angular解决的。如果有人有同样的问题，只需更新你的Angular版本。