我一直在手风琴工作,但由于奇怪的原因,以下代码：
<style>
.collapse {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height .35s ease;
-moz-transition: height .35s ease;
-o-transition: height .35s ease;
transition: height .35s ease;
}
.collapse.in {
height: auto;
}
</style>
<div class="accordion">
<div class="something">
<a class="" >Accordion Pane 1</a>
</div>
<div class="accordion-body collapse">
<div class="accordion-inner"> content </div>
</div>
</div>
<script>
$('.something').click(function(event){
event.preventDefault();
$(this).next('.accordion-body').toggleClass('in');
})
</script>
http://jsfiddle.net/CvdXK/
似乎没有工作.高度不动画.我不知道为什么
非常感谢提前.
解决方法
我想你需要设置一个特定的高度而不是自动,以便在高度上发生转换.
.collapse {
height: 0;
position: relative;
overflow: hidden;
-webkit-transition: height 1.35s ease;
-moz-transition: height 1.35s ease;
-o-transition: height 1.35s ease;
transition: height 1.35s ease;
background-color: #cecece;
}
.collapse.in {
height: 200px; /*Set the height here*/
}
Demo
或者另一个选项在最大高度上转换,就像最接近不可能的最大高度.
.collapse {
max-height:0px;
position: relative;
overflow: hidden;
-webkit-transition: max-height 0.35s ease-in-out;
-moz-transition: max-height 0.35s ease-in-out;
-o-transition: max-height 0.35s ease-in-out;
transition: max-height 0.35s ease-in-out;
background-color: #cecece;
}
.collapse.in {
max-height:1000px;
}
Demo2
这是this page的报价：
Transitioning gradients: Not every CSS property can be transitioned,and the basic rule is that you can only transition through absolute values. For example,you can’t transition between a height of 0px to auto. The browser can’t calculate the intermediate transition values,so the property change is instant.