angularjs - クリック時のAngularJSアニメーション

Question

クリックされたときに要素をアニメーション化するディレクティブを追加しようとしていますが、ディレクティブのコードがトリガーされないようです。

フィドル

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 の使い方が間違っていることに気付きました。これが私が思いついた解決策です。ディレクティブをクリックすると、spin クラスと spin-add クラスが要素に追加されます。アニメーションが実行され、スピン クラスが削除され、次のクリックで再び追加できるようになります。

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