Knowledgebase

Here’s is the code:

http://plnkr.co/edit/EdHyzxwLTfNRXFHj9iU1?p=preview

Yes, yes I know this can easily be done with the standard AngularJS ngAnimate directive, but I wanted to play around with a custom directive, isolated scope and the AngularJS $animate service. So I decided to use a wobble effect from the Animate.css library on a “alarm bell”.

The code use a css class “myWobble”, that uses a named keyframe animation from the Animate.css library, called: “wobble”.

.myWobble {
    -moz-animation: wobble 1s;
    -o-animation: wobble 1s;
    -webkit-animation: wobble 1s;
    animation: wobble 1s;
    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

Then the custom directive “zvdz-animate” is used to start the animation on a dom event (in this case the on  “click” event). The directive will add the class “myWobble” to the element, when the animation is done and the “reset” option is set to “true”, the class “myWobble” will be removed, so when the user clicks again on the element, the animation is started again. When the “reset” option is set to “false” the class will not be removed and the animation will not be fired again.

In some case this is what you want, but in this case not.

<div class="alarmContainer" zvdz-animate="{ effects: [{ on: 'click', className: 'myWobble', reset: true }] }">
    <a href="" class="fa fa-bell-o"></a>
</div>