將參數傳遞給JS Animation in Angular

我寫了這個this Plunker包含一個簡單的JS動畫，通過jQuery.css/jQuery.animate完成。將參數傳遞給JS Animation in Angular

簡要說明：

3矩形示
的 按鈕「隨機化」隨機化寬度/高度的矩形
這種變化widht /高度應動畫

我需要能夠將變化的寬度/高度作爲參數傳遞給動畫addClass函數。該addClass確定指標看起來是這樣的：

addClass(element, className, doneCallback)

所以我說我的自定義值元素的原型。例如LoC 53

Object.getPrototypeOf(element).custom_bs_width = newVal[attrs.id].width;

並在addClass函數中訪問它們以進行動畫。 LoC 65+

myApp.animation('.updateRectangles', function() { 
return { 
    addClass : function(element, className, done) { 
     jQuery(element).animate({ 
     width: Object.getPrototypeOf(element).custom_bs_width,

這是正確的方法嗎？如果不是，替代存在將參數傳遞給JS動畫。我排除了CSS動畫和CSS關鍵幀動畫，因爲沒有辦法傳遞參數。 同意？

來源

2014-01-10 ilmgb

即使使用'element.attr.custom_bs_width =的newval [attrs.id] .WIDTH ;'工作。但仍然 - 這是要走的路嗎？ – ilmgb

正如你懷疑的，「傳遞參數到addClass」是一個真正扭曲的黑客。

角度動畫是圍繞CSS類（因此，addClass/removeClass）構建的，因此，與CSS3轉換效果很好。這個系統是爲了使ng-repeat中的DOM元素自動設置CSS類來觸發添加，移動或刪除項目時的動畫。這與「自定義」動畫無關，就像我認爲你的意圖在這裏。

一種選擇是使用純CSS3過渡（這是不一樣的CSS動畫）和簡單地使用標準角數據經由納克式裝訂修改元件的尺寸/位置/顏色。 CSS轉換，如果在CSS中正確設置，將自動啓動。我創建了一個簡單的方法（computeCSS）表示，「項目的數據」，「轉換」爲NG-風格友好的結構。這是代碼（帶有可以平滑淡化顏色的紅利）。

http://plnkr.co/edit/oMOUiV5Sk6YusPpOqUQz?p=preview

加入600毫秒一個CSS3過渡：

<style> 
    .my-rectangles { 
    position:absolute; 
    -webkit-transition: width 0.6s, height 0.6s, left 0.6s, top 0.6s, background-color 0.6s; 
    transition: width 0.6s, height 0.6s, left 0.6s, top 0.6s, background-color 0.6s; 
    } 
</style>

下面的代碼：

var myApp = angular.module("MyApp", ["ngAnimate"]); 

myApp.controller('MainCtrl', function($scope) { 
    //nothing to declare 
}); 

//general directive for the rectangles 
myApp.directive('rectangles', function() { 
    return{ 
    restrict: 'E', 
    template: '<div style="position:relative; width: 200px; height: 200px; background-color: #646464">' + 
        '<div ng-repeat="item in items" id="{{$index}}" class="my-rectangles" ng-style="computeCSS(item)"></div>' + 
       '</div>', 
    controller: function($scope) { 

     $scope.computeCSS = function(item) { 
     return { 
      width: item.width+"px", 
      left: item.left+"px", 
      top: item.top+"px", 
      height: item.height+"px", 
      'background-color':item.color 
     }; 
     } 

     $scope.items = [ 
     {width: 10, left: 10, top: 10, height: 10, color:'#4C8B71'}, 
     {width: 10, left: 80, top: 10, height: 10, color:'#F3D698'}, 
     {width: 10, left: 160, top: 10, height: 10, color:'#D25F45'} 
     ]; 

     $scope.randomize = function() { 
     $scope.items.forEach(function(item) { 
      item.width = Math.random() * (40 - 10) + 10; 
      item.height = item.width; 
      item.color = "#" + (Math.round(Math.random()*0xFFFFFF)).toString(16); 
     }) 
     } 
    } 
    }  
});

來源

2014-10-09 06:16:26 Bernard

從來沒有想過如何將ng樣式與函數結合使用，並以這種方式「傳遞」參數。很好的解決方案。謝謝！ – ilmgb

將參數傳遞給JS Animation in Angular

回答

相關問題