I recently delved into the world of Angular 2 and TypeScript. Everything was going smoothly until I encountered an issue with Angular 2 animations. While they are generally easy to work with, I have stumbled upon a bug that is really starting to frustrate me.
To demonstrate what's happening, you can check out this Plunker link: http://plnkr.co/edit/0YsCgD0yUiIqIrTyuA5s?p=preview
The problem arises when removing an element from the todo list - instead of removing just the targeted element, all elements disappear. Despite still being present in the JavaScript logic, Angular fails to display them correctly. The animation runs on every element rather than just the selected one based on its index.
Below is the snippet of the specific animation causing issues:
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')
])
])