Question

让我们说我正在创建一个名为＆＃39; shakeIt 的指令。当发出信号时，该指令应该为它所应用的元素添加一个类，在动画结束后，它应该删除该类。

最好的方式是向＆＃34;摇晃＆＃34; （添加课程）不使用事件（我不喜欢使用事件，除非它是一个意图在全球广播/发布的事件）。

谢谢：）

Answer 1

使用示波器上的属性来跟踪动画的状态。然后将属性传递给您的指令：

<div shake-it="myScopeProp" duration="4000"></div>

这是指令的样子：

app.directive('shakeIt', ['$timeout', function($timeout){
  return {

    link: function($scope, $ele, $attr){
      $scope.$watch($attr.shakeIt, function(shaking){
        $ele.toggleClass('someClass', shaking);

        if(shaking){
          $timeout(function(){
            $scope[$attr.shakeIt] = false;
          }, $attr.duration);
        }
      });
    }
  }
}]);

Answer 2

为什么要在Angular提供ngClass指令时创建指令。

在你的控制器中，有一个可以摇动它的模型。

app.controller('ctrl', function($scope) {
  $scope.shakeIt = false;
});

在HTML中，

<p ng-class="{someClass : shakeIt}"> I'm shaking </p>

现在，您可以通过将模型值更改为 true 来控制何时摇动它。动画完成后，将值更改为 false 。

AngularJS自定义动画指令

2 个答案: