为什么这个CSS3在高度上的过渡不起作用

我一直在手风琴中工作，但由于一些奇怪的原因，下面的代码：

 .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; }  
 
 Accordion Pane 1 
 
 
 content 
 
 
  $('.something').click(function(event){ event.preventDefault(); $(this).next('.accordion-body').toggleClass('in'); })  

http://jsfiddle.net/CvdXK/

似乎没有用。 高度没有动画。 我不知道为什么。

首先十分感谢。

Answer 1

我认为您需要设置一个特定的高度而不是auto ，以便在高度上进行过渡。

 .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*/ } 

演示

或者在最大高度上进行另一个选项转换，例如几乎不可能的最大高度。

 .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

以下是此页面的引用：

转换渐变：并非每个CSS属性都可以转换，基本规则是您只能转换绝对值。 例如，您无法在0px的高度与auto之间转换。 浏览器无法计算中间转换值，因此属性更改是即时的。

Answer 2

你需要将尽可能多的CSS移动到JQuery来真正控制动画:(你已经在animate-inner内部animate-inner了animate-body ，我认为你已经完成了复杂的事情。

 $(".something").click(function () { $("this").nextUntil('.accordion-inner').animate({ duration: 350, specialEase: { height: "easeInBounce" } }, { duration: 350, specialEasing: { height: "easeOutBounce" } }); }); 

Answer 3

height属性应该定义为complusary，以使平滑页面过渡到工作表单。 甚至可能是0px。 但不能为auto或max-height为0px。