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-styleが追加され、左のcss値が計算された位置（パーセンテージ）に更新されました。