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
– tasseKATT, Commented May 2, 2014 at 15:27
I think I figured out what I was doing wrong. (everything) I'll post my own solution in a bit — Tantelope
– Tantelope, Commented May 2, 2014 at 16:15

Tantelope · Accepted Answer · 2014-05-02 16:32:57Z

4

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; 
}

answered May 2, 2014 at 16:32

Tantelope

6271 gold badge10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

t3chb0t Over a year ago

@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.

Collectives™ on Stack Overflow

AngularJS animation on click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related