以角度动态设置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值更新为计算的位置（以百分比表示）。