AngularJS - 无法在“元素”上执行“动画”：不支持部分关键帧答案

【问题标题】：AngularJS - Failed to execute 'animate' on 'Element': Partial keyframes are not supportedAngularJS - 无法在“元素”上执行“动画”：不支持部分关键帧
【发布时间】：2016-08-19 19:32:32
【问题描述】：

我来了

错误：无法在“元素”上执行“动画”：不支持部分关键帧。

在 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);

我无法弄清楚为什么它不能使用简单的角度代码。

【问题讨论】：

您在使用$ 时是否包含ng-animate 和jQuery？
是的，我已经包含了 jQuery（不使用 ng-animate）来获得我在第二个小提琴中提到的解决方案。但不是第一个。
使用angular.element($event.target)并在角度之前加载jQuery。
感谢@PankajParkar，您的解决方案有效。 jqLite does not support jQuery's animate function。这就是为什么我需要在 Angular 之前加载 jQuery。
很高兴听到这个消息。要不要我加个答案

标签： javascript jquery angularjs

【解决方案1】：

jQLite 不提供开箱即用的animate 方法，如果需要，则必须加载jQuery（在angular js 之前，以便angular.element 也将具有jQuery 方法）。

另一种角度方式的解决方案是您可以加载ng-animate 模块并让它在myApp 模块中注册。您不需要在 element 上使用 ng-click 处理程序

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

【讨论】：

【解决方案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'
  });

【讨论】：