{"action":"opened","issue":{"url":"https://api.github.com/repos/angular/angular/issues/27754","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/27754/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/27754/comments","events_url":"https://api.github.com/repos/angular/angular/issues/27754/events","html_url":"https://github.com/angular/angular/issues/27754","id":392608529,"node_id":"MDU6SXNzdWUzOTI2MDg1Mjk=","number":27754,"title":"State transition to void triggered for animated children while still existing in DOM","user":{"login":"georgiee","id":1701755,"node_id":"MDQ6VXNlcjE3MDE3NTU=","avatar_url":"https://avatars1.githubusercontent.com/u/1701755?v=4","gravatar_id":"","url":"https://api.github.com/users/georgiee","html_url":"https://github.com/georgiee","followers_url":"https://api.github.com/users/georgiee/followers","following_url":"https://api.github.com/users/georgiee/following{/other_user}","gists_url":"https://api.github.com/users/georgiee/gists{/gist_id}","starred_url":"https://api.github.com/users/georgiee/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/georgiee/subscriptions","organizations_url":"https://api.github.com/users/georgiee/orgs","repos_url":"https://api.github.com/users/georgiee/repos","events_url":"https://api.github.com/users/georgiee/events{/privacy}","received_events_url":"https://api.github.com/users/georgiee/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-12-19T13:45:54Z","updated_at":"2018-12-19T13:45:54Z","closed_at":null,"author_association":"NONE","body":"# 🐞 bug report\r\n\r\n### Affected Package\r\nThe issue is caused by package `@angular/animation` (any version)\r\n\r\n### Description\r\n1. There is an array of numbers\r\n2. There is a parent container that generates multiple child items with a ngFor loop using that array.\r\n3. Each item gets its number from the array assigned.\r\n3. Every item has an animation attached to visualize active or inactive states. The parent container has an animation attached to coordinate staggering of the children.\r\n4. When removing an item by modifying the array of numbers the item is removed.\r\n5. This usually works and the item disappears (no animation involved)\r\n\r\nWhen the array contains identical numbers and you remove one of the duplicate numbers you run into a problem. As expected this will cause remaining siblings to move to the left but you will get a list of \"dead\" components— but only from the animation perspective as the child animation have been transitioned to state void while remaining safe & sound in the DOM. I can reproduce this problem in a small stackblitz where I go into more details by referring to parts of the demo.\r\n\r\n## 🔬 Minimal Reproduction\r\nPreview:\r\nhttps://animation-dom-move-bug.stackblitz.io/\r\n\r\nSource:\r\nhttps://stackblitz.com/edit/animation-dom-move-bug\r\n\r\n## 🔥 Exception or Error\r\nMy small [stackblitz demo](https://stackblitz.com/edit/animation-dom-move-bug) shows the error and you can reproduce it perfectly:\r\n\r\n**Do this:** Click on \"remove 2\" and you will see what's happening in this gif.\r\n\r\n![bug](https://user-images.githubusercontent.com/1701755/50223899-b819f080-039c-11e9-9723-0427bf6377b6.gif)\r\n\r\nYellow stands for state void. You can see a yellow to green animation at the beginning of the gif loop that's the transition (void => active). After clicking the remove button you will see yellow items. I call them dead. Still in DOM but in state void. Just look at the all yellow numbers after you clicked the remove button. Also look into the console, you will see plenty of state transitions from active to void which is wrong.\r\n\r\n## 🌍  Your Environment\r\n**Angular Version:**\r\nLatest Angular 7, see the stackblitz demo.\r\n\r\n**Anything else relevant?**\r\nHere some related issues I think\r\n#23534\r\n#26078"}}
{"actor":{"display_login":"georgiee"}}