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。如果我包含bootstrap.min.css文件，动画就不起作用，如果没有它，它就完美地工作。你们有什么想法吗？

编辑2: 修复了！问题在于.hide和.hidden都是在Bootstrap中定义的类，所以它覆盖了我的样式，在动画可见之前解析了display:none;。当把类更改为另一个名称时，就被修复了：）

- Eric Mitjans

---

似乎只有在height具有某些数字值而不是auto时才有效：http://plnkr.co/edit/ff1O5uSKGtHjdmntVpr1?p=preview - Ivan Chernykh

在我的例子中，它不起作用：SS http://plnkr.co/edit/JLTJ1BhMTHHmxckGEg5U?p=preview - Eric Mitjans

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/

- Thomas Guillory

---

它给我相同的问题，与max-height :/ - Eric Mitjans

它在我的Linux + Chrome 32上没有出现。也许尝试减慢过渡速度，使其更可见：http://plnkr.co/edit/SjrvDVGwMn9jpHd17z73?p=preview - Thomas Guillory

问题已经解决了，原因是.hide和.hidden都是Bootstrap中定义的类，所以它覆盖了动画可见之前的display:none;。当将类更改为其他名称时，问题得到解决：） - Eric Mitjans

@EricMitjans 做得好！我认为你仍然需要使用具有数值的 max-height 或 height。如果它对你有帮助，请不要忘记标记答案为已接受 ;) - Thomas Guillory