AngularJS - 無法執行的「元素」「動畫」：部分關鍵幀，不支持

Question

我越來越

Error: Failed to execute 'animate' on 'Element': Partial keyframes are not supported.

而動畫NG-click方法裏面DOM元素。我使用$ event在ng-click中傳遞DOM參考。

這裏是小提琴鏈接 - fiddle containing issue

$event.currentTarget.animate({ 
    'height': '400px', 
    'width': '400px' 
    }); 

雖然我可以用jQuery的動畫我的DOM元素 - working fiddle

$($event.currentTarget).animate({ 
    'height': '400px', 
    'width': '400px' 
    }, 1000); 

我不能弄清楚爲什麼它不與工作簡單的角碼。

Answer 1

jQLite不提供animate方法開箱，如果你想要它，那麼你必須有負載jQuery（角JS之前，讓angular.element也將有jQuery方法）。

其他角度方式的解決方案將是你可以加載ng-animate模塊&有登記在myApp模塊。你並不需要有ng-click處理過element

//below animation would apply on `container` class 
myApp.animation('.container', [function() { 
    return { 
    click: function(element, doneFn) { 
     angular.element(element).animate({ 
     'height': '400px', 
     'width': '400px' 
     }); 
    } 
    } 
}]); 

Answer 2

得到了它的工作。我需要在angular之前加載jQuery庫。因爲angular's jqLite does not support jQuery's animate funtion。

Angular's jqLite provides only the following jQuery methods

Here is the working fiddle

angular.element($event.currentTarget).animate({ 
    'height': '400px', 
    'width': '400px' 
    });