AngularJS: Why are the animation classes not appended during ng-hide/show transition

Question

I'm trying to do some animation work, but for some reason the appropriate classes aren't appended during a ng-show / ng-hide transition. I've attached this animation showing that they aren't being attached. What am I doing wrong?

I should mention that other animations are working, like those attached to ui-view.

CodePen Demo: http://codepen.io/anon/pen/OyoyYX?editors=101

If you are using chrome, look into the debugger browser. You can see the enter/etc classes are not being attached.

UPDATE:

This case on GitHub seems to be related: https://github.com/angular/angular.js/issues/12267

Answer 1

This is the default angular show/hide behaviour . The ng-hide class use display:none to hide elements. But display:none cannot be animated. Just override this functionality with display:block and opacity:0 to do your animation. Look at your example that I changed:

.ng-fluid{
    transition:1s linear all;
    opacity:1;
}
.ng-fluid.ng-hide{
  opacity:0;
  display:block;
}
.ng-hide-add, .ng-hide-remove{
  position: absolute;
}

http://codepen.io/anon/pen/LpJGwR?editors=101