yüksekliği bu CSS3 geçiş

Question

çalışmıyor neden bir akordeon çalışan, ancak bazı garip nedenle aşağıdaki kod edilmiştir:

http://jsfiddle.net/CvdXK/

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

çalışmak görünmüyor. Yükseklik canlı değildir. Ve nedenini bilmiyorum.

Önceden çok teşekkürler.

Answer 1

Sana yükseklikte gerçekleşmesi geçiş için belirli bir yükseklik yerine auto ayarlamak gerek.

Demo

ya da neredeyse imkansız olan bir maksimum yükseklik gibi maksimum yükseklik üzerinde başka bir seçenek geçiş

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

.

Geçiş eğimleri: Burada

Demo2

.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; 
} 

this page bir alıntı her CSS özelliği geçişe hazır değil ve temel kural yalnızca boyunca geçiş olmasıdır mutlak değerler. Örneğin, 0px yüksekliğiyle otomatik arasında geçiş yapamazsınız. Tarayıcı ara geçiş değerlerini hesaplayamaz, böylece özellik değişikliği anında gerçekleşir.

Answer 2

Gerçekten animasyon kontrol etmek JQuery yanına o CSS kadar taşımak gerekir: (Sen animate-inner iç animate-body var ve sen karmaşık şeye ettik düşünüyorum

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

Answer 3

yükseklik. öznitelik tanımlanmalı, pürüzsüz sayfa geçişini iş formuna çok erken getirmeliydi. 0px bile olabilir, ancak 0px olarak otomatik veya maksimum yükseklik olmamalıdır.