javascript - AngularJS - 无法在 'animate' : Partial keyframes are not supported 上执行 'Element'

Question

我正在获取

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

在 ng-click 方法中对 dom 元素进行动画处理时。我使用 $event 在 ng-click 中传递 DOM 引用。

这是 fiddle 链接 - fiddle containing issue

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

虽然我可以使用 jQuery 为 DOM 元素设置动画 - working fiddle

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

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

Answer 1

jQLite 不提供开箱即用的 animate 方法，如果你想要它，那么你必须加载 jQuery(在 Angular 之前) js，这样 angular.element 也将具有 jQuery 方法)。

另一种 Angular 解决方案是您可以加载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'
      });
    }
  }
}]);