Angular 2 animation bug on ngFor element

Question

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.

Here is Plunker to show what's happening: 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.

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')
        ])

    ])

Answer 1

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