Actually your issue is not about Angular + ng-class, but about a css3 transition between height: auto
and height: 0
.
Here is a SO question about this: http://jsfiddle.net/Y3uxy/
The solution is to do the transition on max-height
instead of height
, and to set max-height
to something big enough.
.intro-text{
max-height:999px;
overflow: hidden;
-webkit-transition: max-height 200ms ease-out;
-moz-transition: max-height 200ms ease-out;
-o-transition: max-height 200ms ease-out;
transition: max-height 200ms ease-out;
}
.intro-text.hide{
max-height:0;
}
Here is a demonstration: http://jsfiddle.net/Y3uxy/