2

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?

enter image description here

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

ymerej
  • 727
  • 1
  • 8
  • 21

1 Answers1

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

Túlio Castro
  • 1,313
  • 10
  • 17
  • You solution worked. It appears you don't need `display:block;` actually. I guess I don't understand why angular decides to use ng-enter/ng-leave vs. ng-remove/ng-add – ymerej Nov 04 '15 at 19:32
  • Good observation, in this case it is because the element will be displayed none after the end of animation. So during the animation the element still exists and can be animated. – Túlio Castro Nov 04 '15 at 19:34
  • Thanks @Tulio, that explains a bit more. I also found this documentation helpful here: https://docs.angularjs.org/api/ngAnimate. It helped explain add/remove vs enter/leave. – ymerej Nov 04 '15 at 19:37