CSS Transition not working with ng-class - html

Question

I'm attempting to create a CSS transition when an element receives a certain class. So far the toggle change works (which means that ng-class is working properly), but the animation doesn't happen.
Here's my code:
.intro-text{
height:auto;
-webkit-transition: height 200ms ease-out;
-moz-transition: height 200ms ease-out;
-o-transition: height 200ms ease-out;
transition: height 200ms ease-out;
}
.intro-text.hide{
height:0;
}
And the HTML:
<div class="intro-text" ng-class="{'hide':clicked}">
<h1>Howdy stranger!</h1>
<h3>Use the form below to search for an artist and start building your record collection!</h3>
</div>
What am I missing?
EDIT: I've narrowed the problem down to bootstrap. If I include the bootstrap.min.css, the animation doesn't work, without it, it works perfectly. Any idea why guys?
EDIT 2: Fixed it! The problem is that both .hide and .hidden are classes defined in Bootstrap, so it was overriding my styles, parsing a display:none; before the animation was visible. When changed the class to another name, it got fixed : )

Answer 1

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/