AngularJS ile bir ng-yineleme içinde bir durumdan başka bir duruma dönüştürün

Question

Karşılaştığım sorunun basitleştirilmiş bir sürümü: ng-repeat kullanarak bir Açısal görünümde görüntülenen bir dizi içindeki öğelerin bir listesi var ... bazı CSS bir bar gibi görünmesi, ve umarım genişliğini canlandırmak ile

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

... yeni verilerle birlikte

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

sık sık ben güncellemek tüm items dizisi hangi percent değerini değiştirir. Çubuğun genişliğinin önceki yüzde değerinden yeni olana kadar canlandırılmasını isterim, ancak ng-repeat listenin tümünün yeniden çizilmesine neden oluyor gibi görünüyor, bu yüzden önceki stilini kaybediyor ve transition animasyonu hiç bitmiyor.

Diğer çözümlere baktım ama sadece giriş/çıkış işlemlerini gerçekleştiriyorlar ve değişmiyorlar. Bu animasyon sadece Angular ve CSS kullanarak nasıl olur?

Answer 1

Düğümlerin her seferinde yeniden oluşturulmaması için "track by" kullanmayı denediniz mi?

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