AngularJS custom animation directive

Question

Let's say I am creating a directive named 'shakeIt'. When signaled, this directive should add a class to the element it's applied on, after animation finishes, it should remove the class.

What is the best way to signal it to "shake" (add the class) without using events (I don't like using events, unless it's an event that is meant to be broadcasted/emitted globally).

Thanks :)

if you don't want to use events how about just watching a shaking scope variable in your directive that's set outside the directive — logee
– logee, Commented Jul 24, 2015 at 0:59

THEtheChad · Accepted Answer · 2015-07-24 01:26:01Z

2

Use a property on your scope to track the state of the animation. Then pass the property to your directive:

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

This is what the directive might look like:

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

edited Jul 24, 2015 at 1:26

answered Jul 24, 2015 at 1:12

THEtheChad

2,4321 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3043893 Over a year ago

Already tried it, it works. But I'm waiting to see if there is a cleaner solution available. Thanks anyways.

Raj · Accepted Answer · 2015-07-24 02:52:49Z

1

why do you want to create a directive when Angular provides ngClass directive.

In your controller, have a model which signals to shake it.

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

while in HTML,

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

Now you have control when to shake it by changing model value to true. When animation finishes, change value to false.

answered Jul 24, 2015 at 2:52

Raj

461 bronze badge

Collectives™ on Stack Overflow

AngularJS custom animation directive

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related