AngularJS 动画点击

Question

我正在尝试添加一个指令，该指令在单击元素时对其进行动画处理，但我的指令中的代码似乎永远不会触发。

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

Answer 1

我意识到我使用 $animate 完全错误。这是我想出的解决方案。单击该指令会将自旋类以及自旋添加类添加到元素中。动画将运行，旋转类将被删除，以便下次单击时可以再次添加。

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