Angularjs ng-show animate not adds animation classes

Question

Using 1.3 beta version I am including angular-animate.js and adding ngAnimate to my module.

I have a html div element as below:

<div class='box-show' ng-show='isHidden'>test</div>

And in my css:

.box-show {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;
  opacity:1;
}

.box-show.ng-hide {
  opacity:0;
}

.box-show.ng-hide-add, .box-show.ng-hide-remove {
  display:block!important;
}

I am checking the chrome inspector and can not see .ng-hide-add or .ng-hide-remove classes being added. Only .ng-hide is being added or removed. The document says we need to add webkit-transition to the element that we want to animate for angular adds the necessary animation classes. And I have added that so what can be the problem? ( The above css only animates when the box is showing )

How did you solved it? I have same issue, and can't figure what is happening — Akxe
use ng class if you want to make it work with css. try not to touch built in directives. — DragonKnight

Morgan Delaney Morgan Delaney · Accepted Answer · 2014-06-03T21:24:16

Plunker

I personally don't muck around with using default .animate classes when playing with ng-animate. I recommend tossing an .animate-show class on your .box-show element, and just working your style around that. See the Plunker.

I believe what's happening is without an animate class or attribute on the element, ng-animate doesn't know what to do.

Example CSS:

  .box-show {
    -webkit-transition:0.5s linear all;
    transition:0.5s linear all;
    opacity:0;
  }

  .box-show.animate-show {
    opacity:1;
  }

  .box-show.animate-show.ng-hide-add,
  .box-show.animate-show.ng-hide-remove {
    display:block!important;
  }

  .box-show.animate-show.ng-hide {
    opacity:0;
  }

Example HTML:

  <div class='box-show animate-show' ng-show='isHidden'>test</div>

Angularjs ng-show animate not adds animation classes

3 Answers