AngularJS动画指令

时间:2016-04-30 10:46:19

标签: angularjs

我想在我的指令中使用$ 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 - 仅记录' [添加]'每次点击

1 个答案:

答案 0 :(得分:0)

      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了解详情。