爲什麼在這個高度CSS3過渡不起作用

我在手風琴一直在努力，但對於一些奇怪的原因如下代碼：爲什麼在這個高度CSS3過渡不起作用

<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/

似乎並沒有工作。高度不生動。我不知道爲什麼。

非常感謝。

來源

2013-10-13 MariaZ

我認爲你需要設置一個特定的高度而不是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*/ 
}

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報價：

過渡梯度：並不是每一個CSS屬性可以轉移，基本規則是，你只能通過過渡絕對值。例如，您不能在0px高度到auto之間切換。瀏覽器無法計算中間轉換值，因此屬性更改是即時的。

來源

2013-10-13 03:46:17 PSL

你是對的，但如果我想動態身高 – MariaZ

@MariaZ我認爲這是對汽車高度的限制，h關於在最大高度上轉換？給最大高度的東西最大.. – PSL

@MariaZ像這樣的東西http://jsfiddle.net/nheup/它的一個限制動畫高度自動。 – PSL

您需要到JQuery的儘可能多的CSS的移動真正控制動畫：（你有animate-body內animate-inner，我想你已經過於複雜的事情

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

來源

2013-10-13 03:48:20 DevlshOne

高度。屬性應該定義爲complusary，以使頁面平滑過渡到第一個工作形式，甚至可以是0px，但不能是0px的自動或max-height。

來源

2014-04-19 09:14:10

爲什麼在這個高度CSS3過渡不起作用

回答

相關問題