javascript - 在 ng-repeat 中使用 AngularJS 从一种状态到另一种状态进行动画处理

Question

我遇到的问题的简化版本:我有一个数组中的元素列表，这些元素使用 ng-repeat 以 Angular View 显示，例如...

<li ng-repeat="item in items">
    <div class="bar" ng-style="{'width': item.percent + '%'}">{{item.percent}}</div>
</li>

使用一些 CSS 使其看起来像条形，并希望为宽度设置动画...

.bar { 
    height: 1em;
    background: blue;
    transition: width 0.5s ease-in-out;
}

我经常用新数据更新整个 items 数组，这会更改 percent 值。我希望条形的宽度从以前的百分比值动画到新的百分比值，但似乎 ng-repeat 导致整个列表被重绘，所以它失去了以前的风格并且 transition 动画永远不会发生。

我研究过其他解决方案，但它们似乎只处理进入/离开，而不处理更改。仅使用 Angular 和 CSS 怎么能实现此动画？

Answer 1

您是否尝试过使用“track by”来避免每次都重新创建节点？

<li ng-repeat="item in items track by $index">
    <div class="bar" ng-style="{'width': item.percent + '%'}">{{item.percent}}    </div>
</li>