{"action":"created","issue":{"url":"https://api.github.com/repos/angular/material/issues/1559","labels_url":"https://api.github.com/repos/angular/material/issues/1559/labels{/name}","comments_url":"https://api.github.com/repos/angular/material/issues/1559/comments","events_url":"https://api.github.com/repos/angular/material/issues/1559/events","html_url":"https://github.com/angular/material/issues/1559","id":58094130,"number":1559,"title":"mdGridList does not reflow when filtering with animations","user":{"login":"jonnysamps","id":149911,"avatar_url":"https://avatars.githubusercontent.com/u/149911?v=3","gravatar_id":"","url":"https://api.github.com/users/jonnysamps","html_url":"https://github.com/jonnysamps","followers_url":"https://api.github.com/users/jonnysamps/followers","following_url":"https://api.github.com/users/jonnysamps/following{/other_user}","gists_url":"https://api.github.com/users/jonnysamps/gists{/gist_id}","starred_url":"https://api.github.com/users/jonnysamps/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jonnysamps/subscriptions","organizations_url":"https://api.github.com/users/jonnysamps/orgs","repos_url":"https://api.github.com/users/jonnysamps/repos","events_url":"https://api.github.com/users/jonnysamps/events{/privacy}","received_events_url":"https://api.github.com/users/jonnysamps/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/angular/material/labels/type:%20bug","name":"type: bug","color":"000000"},{"url":"https://api.github.com/repos/angular/material/labels/ui:%20layout","name":"ui: layout","color":"fbca04"}],"state":"open","locked":false,"assignee":{"login":"shyndman","id":42326,"avatar_url":"https://avatars.githubusercontent.com/u/42326?v=3","gravatar_id":"","url":"https://api.github.com/users/shyndman","html_url":"https://github.com/shyndman","followers_url":"https://api.github.com/users/shyndman/followers","following_url":"https://api.github.com/users/shyndman/following{/other_user}","gists_url":"https://api.github.com/users/shyndman/gists{/gist_id}","starred_url":"https://api.github.com/users/shyndman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shyndman/subscriptions","organizations_url":"https://api.github.com/users/shyndman/orgs","repos_url":"https://api.github.com/users/shyndman/repos","events_url":"https://api.github.com/users/shyndman/events{/privacy}","received_events_url":"https://api.github.com/users/shyndman/received_events","type":"User","site_admin":false},"milestone":{"url":"https://api.github.com/repos/angular/material/milestones/17","html_url":"https://github.com/angular/material/milestones/0.12.0","labels_url":"https://api.github.com/repos/angular/material/milestones/17/labels","id":1166984,"number":17,"title":"0.12.0","description":"Polish and Bugfixes leading up to 1.0\r\n","creator":{"login":"robertmesserle","id":571363,"avatar_url":"https://avatars.githubusercontent.com/u/571363?v=3","gravatar_id":"","url":"https://api.github.com/users/robertmesserle","html_url":"https://github.com/robertmesserle","followers_url":"https://api.github.com/users/robertmesserle/followers","following_url":"https://api.github.com/users/robertmesserle/following{/other_user}","gists_url":"https://api.github.com/users/robertmesserle/gists{/gist_id}","starred_url":"https://api.github.com/users/robertmesserle/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/robertmesserle/subscriptions","organizations_url":"https://api.github.com/users/robertmesserle/orgs","repos_url":"https://api.github.com/users/robertmesserle/repos","events_url":"https://api.github.com/users/robertmesserle/events{/privacy}","received_events_url":"https://api.github.com/users/robertmesserle/received_events","type":"User","site_admin":false},"open_issues":555,"closed_issues":450,"state":"open","created_at":"2015-06-16T15:48:24Z","updated_at":"2015-10-06T22:43:36Z","due_on":"2015-10-12T05:00:00Z","closed_at":null},"comments":18,"created_at":"2015-02-18T16:51:12Z","updated_at":"2015-10-06T22:56:22Z","closed_at":null,"body":"mdGridList works just fine with a combination of ng-repeat and a text filter.  Everything reflows just fine. When you add an animation to the tile then the animations occur but the elements in the grid list don't reflow as they do without the animation.\r\n\r\nI tried to create an example with Plunkr but the 0.8.0-rc1 release is not available in the CDN.\r\n\r\n# Markup\r\n```\r\n<md-grid-list md-gutter=\"1em\" md-row-height=\"120px\" md-cols=\"3\">\r\n        <md-grid-tile ng-repeat=\"site in sites | filter:searchText\" class=\"repeated-item\">\r\n            <md-grid-tile-header><h3>{{site.name}}</h3></md-grid-tile-header>\r\n                <div flex layout=\"row\" layout-align=\"space-between end\" style=\"height:100%\" >\r\n                    <div>\r\n                        <md-button ng-click=\"delete(site, event)\" class=\"md-primary\">Delete</md-button>\r\n                    </div>\r\n                    <div flex>{{site.urls.length | number}}</div>\r\n                </div>\r\n        </md-grid-tile>\r\n    </md-grid-list>\r\n```\r\n\r\n# SCSS (the example animation from ngAnimate docs)\r\n```\r\n.repeated-item {\r\n\r\n  /*\r\n  We're using CSS transitions for when\r\n  the enter and move events are triggered\r\n  for the element that has the .repeated-item\r\n  class\r\n  */\r\n  &.ng-enter, &.ng-move {\r\n    -webkit-transition: 0.5s linear all;\r\n    -moz-transition: 0.5s linear all;\r\n    -o-transition: 0.5s linear all;\r\n    transition: 0.5s linear all;\r\n    opacity: 0;\r\n  }\r\n\r\n  /*\r\n   The ng-enter-active and ng-move-active\r\n   are where the transition destination properties\r\n   are set so that the animation knows what to\r\n   animate.\r\n  */\r\n  &.ng-enter.ng-enter-active, &.ng-move.ng-move-active {\r\n    opacity: 1;\r\n  }\r\n\r\n  /*\r\n    We're using CSS keyframe animations for when\r\n    the leave event is triggered for the element\r\n    that has the .repeated-item class\r\n  */\r\n  &.ng-leave {\r\n    -webkit-animation:0.5s my_animation;\r\n    -moz-animation:0.5s my_animation;\r\n    -o-animation:0.5s my_animation;\r\n    animation:0.5s my_animation;\r\n  }\r\n}\r\n\r\n@keyframes my_animation {\r\n  from { opacity:1; }\r\n  to { opacity:0; }\r\n}\r\n/*\r\n  Unfortunately each browser vendor requires\r\n  its own definition of keyframe animation code...\r\n*/\r\n@-webkit-keyframes my_animation {\r\n  from { opacity:1; }\r\n  to { opacity:0; }\r\n}\r\n\r\n@-moz-keyframes my_animation {\r\n  from { opacity:1; }\r\n  to { opacity:0; }\r\n}\r\n\r\n@-o-keyframes my_animation {\r\n  from { opacity:1; }\r\n  to { opacity:0; }\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/angular/material/issues/comments/146027520","html_url":"https://github.com/angular/material/issues/1559#issuecomment-146027520","issue_url":"https://api.github.com/repos/angular/material/issues/1559","id":146027520,"user":{"login":"shyndman","id":42326,"avatar_url":"https://avatars.githubusercontent.com/u/42326?v=3","gravatar_id":"","url":"https://api.github.com/users/shyndman","html_url":"https://github.com/shyndman","followers_url":"https://api.github.com/users/shyndman/followers","following_url":"https://api.github.com/users/shyndman/following{/other_user}","gists_url":"https://api.github.com/users/shyndman/gists{/gist_id}","starred_url":"https://api.github.com/users/shyndman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shyndman/subscriptions","organizations_url":"https://api.github.com/users/shyndman/orgs","repos_url":"https://api.github.com/users/shyndman/repos","events_url":"https://api.github.com/users/shyndman/events{/privacy}","received_events_url":"https://api.github.com/users/shyndman/received_events","type":"User","site_admin":false},"created_at":"2015-10-06T22:56:22Z","updated_at":"2015-10-06T22:56:22Z","body":"There you go. Should be in soon."}}