在 ng-repeat 中使用 AngularJS 从一个状态动画到另一个状态

Question

我遇到的问题的简化版本：我有一个数组中的项目列表，这些项目使用 ng-repeat 以 Angular 视图显示，例如...

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