Javascript CSS过渡使瓷砖位置错误（角度材质）

使用angularjs，我正在显示一些我正在使用搜索输入过滤的瓷砖

<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>

有一个动画就像我想要的

但是瓷砖的位置没有改变

例如，如果某些瓷砖匹配搜索，则在页面的中间，在一些其他瓦片之后。 其他磁贴将消失，与搜索匹配的磁贴将保留，但在同一位置，它们不会移动到页面的开头

然而，只有在清除搜索输入时，匹配的磁贴才会移动到正确的位置

<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>

---

如何修复此问题？

您希望在项目离开并进入列表时对其进行动画处理？什么列表？正在显示的项目列表？我想在显示更改时设置动画，也就是说，当与过滤器匹配的项目数更改时，我认为您要查找的是ngAnimate模块（）。它允许您为enter和leave的ng repeat中的项目设置动画。因此，当一个项目匹配一个过滤器时，你可以让它在输入时设置动画，当它与过滤器不匹配时，它将设置叶子的动画。看起来角度材质在过渡方面有一些问题：你想让它在项目离开并进入列表时设置动画吗？什么列表？正在显示的项目列表？我想在显示更改时设置动画，也就是说，当与过滤器匹配的项目数更改时，我认为您要查找的是ngAnimate模块（）。它允许您为enter和leave的ng repeat中的项目设置动画。因此，当项目与过滤器匹配时，您可以在enter键上设置其动画，当项目与过滤器不匹配时，它将设置叶片动画。看起来，角度材质在过渡方面存在一些问题：