Q:

Dynamically set css transitions in angular

I am trying to develop an animated slider to show someones current status in a system, like an xp bar in a game. It will start at the left of the screen and move to a position to the right to indicate status.
We are using a tier system. The max width of the slider is set.The problem is the number of tiers is dynamic as well as the number of points per tier. So I cannot statically set where slider must go therefor the stopping position of the slider is data driven.
So how do I dynamically set the transition of the slider?
Here is the code 
        <div class="row">
           <div class="col-sm-12">
             <h2 ng-repeat="tier in tiers" style="background-color:{{tier.Color}};width:{{widthPerTier}}%">{{tier.Name}}</h2>
           </div>
           <img class="tractor-{{customer.Tier.Name|lowercase}}" src="../../img/tractor.png" />
       </div>

Where I have tractor-{{customer.Tier.Name|lowercase}} is because I had hard coded some of the tiers to get the tractor to move.(Tractor image is the slider here)

A:

So after research what I found was this, I created a css class which I applied to my slider 
.slider-transition {
left: 0px;
position: absolute;
-webkit-transition: left 2s linear 1s; 
transition: left 2s linear 1s;

}
Then what I did was added ng-style to the actual element and updated the left css value to a calculated position(in percentage).

