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

单击AngularJS动画

1 个答案: