Html CSS转换不适用于ng类

我试图在元素接收某个类时创建CSS转换。到目前为止，切换更改仍然有效（这意味着ng类工作正常），但动画没有发生

这是我的密码：

.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;
}

以及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>

你好，陌生人！
使用下表搜索艺术家并开始创建您的唱片收藏！

我错过了什么

编辑：我已将问题缩小到引导。如果我包括bootstrap.min.css，动画就不能工作，没有它，它就可以完美地工作。知道为什么吗

---

编辑2：修复了它！问题是.hide和.hidden都是在引导中定义的类，所以它重写了我的样式，解析显示：无；在动画可见之前。当将类更改为另一个名称时，它得到了修复：）

实际上，您的问题不是关于Angular+ng类，而是关于在

height:auto

和

height:0

之间的css3转换

关于这一点，这里有一个非常重要的问题：

解决方案是在

max height

而不是

height

上进行转换，并将

max height

设置为足够大的值

.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;
}

---

这里有一个演示：

似乎只有当

高度

有一些数值而不是

自动时，它才有效：在我的示例中，不起作用：SS它给了我与最大高度相同的问题：/它不在我的Linux+Chrome 32上。可能会尝试减慢转换速度以使其更可见：修复了它，问题是.hide和.hidden都是引导中定义的类，因此它重写了它，解析显示：none；在动画可见之前。当将类更改为另一个名称时，它得到了修复：）@EricMitjans干得好！我认为您仍然必须使用带有数值的
max height
或
height
。如果答案对你有帮助的话，别忘了标记为“已接受”。）