ng-repeat内の1つの状態から別の状態へのAngularJSのアニメーション

Question

直面する問題の簡略化されたバージョン：ng-repeatを使用するAngularビューで表示される配列内の項目のリストがあります。いくつかのCSSと...

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

、それはバーのように見えるよう、うまくいけば幅をアニメーション化する...

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