CSS 过渡不适用于 ng-class

Posted 2023-03-06

【中文标题】CSS 过渡不适用于 ng-class

【英文标题】：CSS Transition not working with ng-class

【发布时间】：2014-04-20 22:12:54

【问题描述】：

我正在尝试在元素接收到某个类时创建 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;在动画可见之前。当将课程更改为另一个名称时，它得到了修复:)

【问题讨论】：

似乎只有在height 有一些数值而不是auto 时才有效：plnkr.co/edit/ff1O5uSKGtHjdmntVpr1?p=preview

在我的例子中，不起作用：SS plnkr.co/edit/JLTJ1BhMTHHmxckGEg5U?p=preview

【参考方案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/

【讨论】：

它给了我与 max-height 相同的问题：/ plnkr.co/edit/JLTJ1BhMTHHmxckGEg5U?p=preview

它不在我的 Linux + Chrome 32 上。也许可以尝试减慢转换速度以使其更明显：plnkr.co/edit/SjrvDVGwMn9jpHd17z73?p=preview

修复它，问题是 .hide 和 .hidden 都是 Bootstrap 中定义的类，所以它覆盖它，解析一个 display:none;在动画可见之前。将课程更改为另一个名称时，它得到了修复：)

@EricMitjans 干得好！我认为您仍然必须使用带有数值的max-height 或height。如果对您有帮助，请不要忘记将答案标记为已接受；）