javascript - CSS Transition making tile position wrong (Angular Material) -

using angularjs i'm displaying tiles filtering using search input.

<md-grid-list md-cols-sm="2" md-cols-md="4" md-cols-lg="6" md-cols-gt-lg="8"                 md-row-height-gt-md="1.2:1" md-row-height="1:1"                 md-gutter="10px" md-gutter-gt-sm="10px">              <md-grid-tile class="gray" ng-repeat="carto in cartolist | filter : { fulldisplayname: searchinput}">                 <md-button ng-click="changesvg(carto.filename)" aria-label="carto.displayname">                     <img src="style/images/thumbnails/{{carto.filename}}.png" width="100%" height="100%"></img>                 </md-button>                 <md-grid-tile-footer><h3 align="center">{{carto.displayname}}</h3> </md-grid-tile-footer>             </md-grid-tile>          </md-grid-list> 

this works fine, tiles matching search input displayed.

but want add animation effect when display changes. css code :

md-grid-tile { -webkit-transition: 500ms ease-out 100ms; -moz-transition: 500ms ease-out 100ms; -o-transition: 500ms ease-out 100ms; transition: 500ms ease-out 100ms; } 

there animation want.

but positions of tiles not changed.

for example if tiles matching search in middle of page, after other tiles. other tiles disappear , tiles matching search stay, @ same position, not moved beginning of page.

weridly, matching tiles moved @ proper position when clearing search input.

how can fix ?