將框移動到隨機位置與angularjs

Question

我正在尋找一種方法來使用angularjs從this answer實現確切的功能：具體來說，爲一個框（div）在屏幕上隨機移動，同時被動畫。目前我已經嘗試過

myApp.directive("ngSlider", function($window) { 
    return { 
    link: function(scope, element, attrs){ 
     var animateDiv = function(newq) { 
      var oldRect = element.getBoundingClientRect(); 
      var oldq = [oldRect.top, oldRect.left]; 
      if (oldq != newq){ 
       var dir = calcDir([oldq.top, oldq.left], newq); 
       element.moveTo(oldq.left + dir[0], oldq.top + dir[1]); 
       setTimeout(animateDiv(newq), 100); 
      } 
     }; 

     var makeNewPosition = function() { 
      // Get viewport dimensions (remove the dimension of the div) 
      var window = angular.element($window); 
      var h = window.height() - 50; 
      var w = window.width() - 50; 

      var nh = Math.floor(Math.random() * h); 
      var nw = Math.floor(Math.random() * w); 

      return [nh,nw]; 

     }; 


     function calcDir(prev, next) { 
      var x = prev[1] - next[1]; 
      var y = prev[0] - next[0]; 
      var norm = Math.sqrt(x * x + y * y); 
      return [x/norm, y/norm]; 
     } 
     var newq = makeNewPosition(); 
     animateDiv(newq); 
    } 
    }; 
}); 

從角度來看，這似乎有點不對。任何幫助表示讚賞。

Answer 1

我喜歡在這種情況下利用CSS。

• 絕對定位的DIV
• 使用ng-style到top和left屬性綁定到某些範圍的變量
• 隨意改變的top和left屬性本調查範圍內的可變
• 使用CSS過渡上top和left屬性爲您設置動畫效果

我做了一個plnkr！訪問肯塔基！