Here's a simplified explanation of my current dilemma: I have an array containing a list of items that are being displayed in an Angular view using ng-repeat, like...
<li ng-repeat="item in items">
<div class="bar" ng-style="{'width': item.percent + '%'}">{{item.percent}}</div>
</li>
I've applied some CSS to make it resemble a bar, with hopes of animating its width...
.bar {
height: 1em;
background: blue;
transition: width 0.5s ease-in-out;
}
Periodically, I update the entire items array with new data, adjusting the percent value. Ideally, I'd like the bar's width to smoothly animate from the previous percent to the new one. However, due to the nature of ng-repeat, the whole list is redrawn each time, causing it to lose its prior styling and preventing the desired transition animation.
I've explored various solutions, but they seem to only address entering or leaving elements rather than handling changes. Is there a way to achieve this animation solely utilizing Angular and CSS?