以角度動態設置css轉換

Question

我正在嘗試開發一個動畫滑塊以顯示某人在系統中的當前狀態，如遊戲中的xp欄。它將從屏幕左側開始移動到右側的位置以指示狀態。

我們正在使用一個層次系統。滑塊的最大寬度已設置。問題是層數是動態的，以及每層的點數。所以我不能靜態設置滑塊必須移動的位置，滑塊的停止位置是數據驅動的。

那麼我該如何動態設置滑塊的轉換？

下面是代碼

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

在那裏我有拖拉機 - {{customer.Tier.Name |小寫}}，是因爲我已經硬編碼了一些層次的去移動拖拉機（拖拉機圖像是這裏的滑塊）

Answer 1

所以經過研究我發現這一點，我創建了我申請到我的滑塊

.slider-transition { 
left: 0px; 
position: absolute; 
-webkit-transition: left 2s linear 1s; 
transition: left 2s linear 1s; 

}

CSS類

然後我所做的是將ng樣式添加到實際元素，並將左側的css值更新爲計算的位置（以百分比表示）。