Rishi Vedpathak Rishi Vedpathak - 3 months ago 90
Javascript Question

AngularJS - Failed to execute 'animate' on 'Element': Partial keyframes are not supported

I am getting


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


while animating dom element inside ng-click method. I am passing the DOM ref in ng-click by using $event.

Here is the fiddle link - fiddle containing issue

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


Though I can animate my DOM element by using jQuery - working fiddle

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


I am not able to figure out why it is not working with simple angular code.

Answer

jQLite doesn't provide animate method out of the box, if you want it then you have to have load jQuery(before angular js, so that angular.element will also have jQuery methods) .

The other angular way solution would be you could load ng-animate module & have it register inside myApp module. You don't need to have ng-click handler over 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'
      });
    }
  }
}]);
Comments