AngularJS animation on click

Question

I'm trying to add a directive that animates the element when it is clicked, but the code in my directive never seems to trigger.

Fiddle

html:

<img class="refresh" animate-spin src="refresh-icon-614x460.png">

js:

myApp.directive('animateSpin', ['$animate', function($animate) {
  return function(element, scope, attrs) {
    element.on('click', function() {
        $animate.addClass(element, 'spin');
    });
  };
}]);

Your example uses AngularJS v1.0.5, is that the version you are asking for? — tasseKATT, May 02 '14 at 15:27
I think I figured out what I was doing wrong. (everything) I'll post my own solution in a bit — Tantelope, May 02 '14 at 16:15

score 4 · Accepted Answer · answered May 02 '14 at 16:32

I realized that I was using $animate all wrong. Here's the solution I came up with. Clicking the directive will add the spin class to the element, as well as the spin-add class. the animation will run and the spin class will be removed so that it can be added again next click.

directiveModule.directive('animateSpin', ['$animate',
    function ($animate) {
        return {
            link: function (scope, elem, attrs) {
                elem.on('click', function () {
                    var self = angular.element(this);
                    $animate.addClass(self, 'spin', function () {
                        self.removeClass('spin');
                    });
                });
            }
        };
}]);

CSS:

.spin-add{
   -webkit-animation:spin 4s linear;
    -moz-animation:spin 4s linear;
    animation:spin 4s linear; 
}

@IanB you cannot just change an answer by editing it and posting additional code without pointing this out to the author first because it might not have been his intent. — t3chb0t, Jan 22 '15 at 07:03

AngularJS animation on click

1 Answers1