CSS 过渡不适用于 ng-class

Question

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

这是我的代码：

.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 都是 Bootstrap 中定义的类，所以它覆盖了我的样式，解析了 display:none;在动画可见之前。当将课程更改为另一个名称时，它得到了修复:)

Answer 1

实际上你的问题不是关于 Angular + ng-class，而是关于 height: auto 和 height: 0 之间的 css3 转换。

这是一个关于此的 SO 问题：http://jsfiddle.net/Y3uxy/

解决方案是在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;
}

这是一个演示：http://jsfiddle.net/Y3uxy/