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转换。

以下是关于此的问题：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/

CSS转换不适用于ng-class

1 个答案: