CSS Transition not working with ng-class

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/