{"action":"created","issue":{"url":"https://api.github.com/repos/AFASSoftware/maquette/issues/13","labels_url":"https://api.github.com/repos/AFASSoftware/maquette/issues/13/labels{/name}","comments_url":"https://api.github.com/repos/AFASSoftware/maquette/issues/13/comments","events_url":"https://api.github.com/repos/AFASSoftware/maquette/issues/13/events","html_url":"https://github.com/AFASSoftware/maquette/issues/13","id":73584462,"number":13,"title":"Diff algorithm turns reorderings into removals and additions","user":{"login":"paldepind","id":521604,"avatar_url":"https://avatars.githubusercontent.com/u/521604?v=3","gravatar_id":"","url":"https://api.github.com/users/paldepind","html_url":"https://github.com/paldepind","followers_url":"https://api.github.com/users/paldepind/followers","following_url":"https://api.github.com/users/paldepind/following{/other_user}","gists_url":"https://api.github.com/users/paldepind/gists{/gist_id}","starred_url":"https://api.github.com/users/paldepind/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/paldepind/subscriptions","organizations_url":"https://api.github.com/users/paldepind/orgs","repos_url":"https://api.github.com/users/paldepind/repos","events_url":"https://api.github.com/users/paldepind/events{/privacy}","received_events_url":"https://api.github.com/users/paldepind/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":26,"created_at":"2015-05-06T10:30:50Z","updated_at":"2015-05-16T12:11:25Z","closed_at":null,"body":"How am I supposed to do sensible animations when moving children actually doesn't move the DOM nodes around but instead triggers a series of creations and removals?"},"comment":{"url":"https://api.github.com/repos/AFASSoftware/maquette/issues/comments/102620892","html_url":"https://github.com/AFASSoftware/maquette/issues/13#issuecomment-102620892","issue_url":"https://api.github.com/repos/AFASSoftware/maquette/issues/13","id":102620892,"user":{"login":"paldepind","id":521604,"avatar_url":"https://avatars.githubusercontent.com/u/521604?v=3","gravatar_id":"","url":"https://api.github.com/users/paldepind","html_url":"https://github.com/paldepind","followers_url":"https://api.github.com/users/paldepind/followers","following_url":"https://api.github.com/users/paldepind/following{/other_user}","gists_url":"https://api.github.com/users/paldepind/gists{/gist_id}","starred_url":"https://api.github.com/users/paldepind/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/paldepind/subscriptions","organizations_url":"https://api.github.com/users/paldepind/orgs","repos_url":"https://api.github.com/users/paldepind/repos","events_url":"https://api.github.com/users/paldepind/events{/privacy}","received_events_url":"https://api.github.com/users/paldepind/received_events","type":"User","site_admin":false},"created_at":"2015-05-16T12:11:25Z","updated_at":"2015-05-16T12:11:25Z","body":"@johan-gorter I have not yet looked closely at your hero animation example. But at a first glance it looks quite impressive. Could you please explain why you think not having reordering is an advantage?\r\n\r\nI have with my own virtual DOM library (which does reordering) implemented the type of animation I think you'd have a hard time doing without reorderings. [You can look at the example here](http://paldepind.github.io/snabbdom/examples/reorder-animation/).\r\n\r\nNotice a few things:\r\n\r\n* The animation when an element enters the DOM (press the add button)\r\n* The different animation when an element leaves the DOM (press one of the red crosses)\r\n* The a smooth animation when elements are reordered. This reordering animation has nothing to do with the enter and leave animation (try changing the sort)\r\n* The animated elements are of different heights\r\n\r\nI think (but would love to be proved wrong) that you'd have a hard time implementing this with Maquette. Both because you don't detect reorderings but also because you don't have a callback for when an element has been added into the actual DOM (you only have an event for when an element is added into it's parent)."}}