AngularJS 动画指令

Question

我想在我的指令中使用 $animate 添加一个类：

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

但从未添加该类。

有什么想法吗？

更新 - 添加 plnkr：https://plnkr.co/edit/zczgsnLuXONfU8U5mIuv - 每次点击仅记录“[添加]”

Answer 1

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

您可以查看this answer了解更多详情。