AngularJS - 无法执行＆＃39;动画＆＃39; on＆＃39;元素＆＃39;：不支持部分关键帧

Question

我正在

  

错误：无法执行＆＃39;动画＆＃39; on＆＃39;元素＆＃39;：不支持部分关键帧。

在ng-click方法中设置动画dom元素。我使用$ event通过ng-click传递DOM ref。

这是小提琴链接 - 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模块＆amp;让它在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'
  });