2

简单版本我有一个设置 CSS属性
的 ng-style 变量。left由于元素具有过渡，因此任何移动都是显而易见的。我希望它从例如 400 到 500，但它总是从 0 开始，产生“跳跃”效果。这是 Angular 绑定工作方式的问题吗？

详细版
我有一个 HTML 元素，需要left在路由之外计算 CSS 属性。当路线改变时，元素滑到另一个位置。我的问题是元素静止到位置 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。如果我将左值直接粘贴到实时网络检查器中，则转换直接到预期的位置，而不重置为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")};
  }

};
4

0 回答 0