我试图在元素接收特定类时创建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;。当把类更改为另一个名称时,就被修复了:)
height
具有某些数字值而不是auto
时才有效:http://plnkr.co/edit/ff1O5uSKGtHjdmntVpr1?p=preview - Ivan Chernykh