使用AngularJS在ng重复中从一个状态到另一个状态制作动画

Animate with AngularJS from one state to another state within an ng-repeat

本文关键字：状态 一个 另一个 动画 ng AngularJS 使用      更新时间：2024-03-08

我遇到的问题的简化版本：我有一个数组中的项目列表，这些项目使用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？

您是否尝试过使用"track-by"，这样每次都不会重新创建节点？

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