CODEWITHSUNDEEP
angularjsangularjs-directivecss-animationsangularjs-animation
Tantelope
Tantelope

Reputation: 617

AngularJS animation on click

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');
    });
  };
}]);

Upvotes: 0

Views: 4605

Answers (1)

Tantelope
Tantelope

Reputation: 617

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

Upvotes: 4

Related Questions