css - 永続変数と CSS トランジションに関連付けられた AngularJS ng スタイル

Question

シンプルなバージョンCSSプロパティ
を設定する ng-style の変数があります。left要素にはトランジションがあるため、動きが目立ちます。たとえば、400 から 500 に変更したいのですが、常に 0 から始まるため、「ジャンプ」効果が生じます。これは Angular のバインディングの仕組みに問題がありますか?

詳細版
CSS プロパティを必要とする HTML 要素がleftルート外で計算されます。ルートが変わると、要素は別の位置にスライドします。私の問題は、要素が位置 0 に静止してから、現在の位置からアニメーション化する必要があるときに、ここから正しい位置にアニメーション化することです。

<div id="deviceCursor" ng-style="myService.getCursorPosition"></div>

#deviceCursor {
        position: absolute; bottom: 0px; left: 0;
        @include transition(all, 750ms, cubic-bezier(0.230, 1.000, 0.320, 1.000));
    }

現在のコントローラーとサービスの両方に左位置変数を保存しようとしましたが、両方で、正しい位置にアニメーション化する前に要素が 0 にリセットされます。コントローラーに console.log がありますが、変数が 0 にリセットされているかどうかわかりません。左の値をライブ Web インスペクターに直接貼り付けると、トランジションは意図した位置に直接移動し、0 にリセットすることはありません。私はCSSが正しいことを知っています。

これはjQueryで簡単ですが、正しいAngularJSの方法はありますか?

サービス

var nav = {

        cursorPosition: 0,

        calculateCursorPosition: function(devicePosition){

            var width = 276;
            var delta = 39;

            return ((devicePosition * width) - delta);  
        }
    };

    // Public API
return {

  moveCursorToDevice: function(devicePosition){
    nav.cursorPosition = nav.calculateCursorPosition(devicePosition);
  },

  getCursorPosition: function(){
    console.log("Pos: " + nav.cursorPosition);          
    return {left: (nav.cursorPosition + "px")};
  }

};