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