AngularJS animate directive

Question

I want to add a class using $animate in my directive:

app.directive( 'animTest', [ '$animate', function( $animate ) {
  return function( scope, element, attrs ) {
    element.on( 'click', function() {
      if( element.hasClass( 'clicked' ) ) {
        console.log( '[remove]' );
        $animate.removeClass( element, 'clicked' );
      } else {
        console.log( '[add]' );
        $animate.addClass( element, 'clicked' );
      }
    });
  };
}]);

CSS:

.clicked {
  background: red;
}
.clicked-add, .clicked-remove, .clicked-add-active, .clicked-remove-active {
  -webkit-transition: all linear 0.5s;
  transition: all linear 0.5s;
}

But the class is never added.

Any idea?

UPDATE - added plnkr: https://plnkr.co/edit/zczgsnLuXONfU8U5mIuv - logs only '[add]' to each click

post your complete code or create a plunkr – Mohsin Muzawar Apr 30 '16 at 10:49 — Mohsin Muzawar, Apr 30 '16 at 10:49
your directice work fine. what is display in console? – Hadi J Apr 30 '16 at 11:08 — Hadi J, Apr 30 '16 at 11:08

score 0 · Accepted Answer · edited May 23 '17 at 10:33

      element.on( 'click', function() {
        if( element.hasClass( 'clicked' ) ) {
          scope.$apply(function(){
            console.log( '[remove]' );
            $animate.removeClass( element, 'clicked' );
          })

        } else {
          scope.$apply(function(){
            console.log( '[add]' );
            $animate.addClass( element, 'clicked' );
          });
        }
      });

you can check this answer for more details.

AngularJS animate directive

1 Answers1