Dlaczego CSS3 przejścia na wysokości nie działa

Question

pracuję w akordeonu, ale z jakiegoś dziwnego powodu następujący kod:

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

nie wydają się działać. Wysokość nie jest animowana. I nie wiem dlaczego.

Dziękuję bardzo z góry.

Answer 1

Myślę, że trzeba ustawić określoną wysokość zamiast auto, aby przejście miało miejsce na wysokości.

.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

Albo inna opcja przejścia na max-height, jak max-height, że jest prawie niemożliwe.

.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

Oto cytat z this page:

przejście gradienty: Nie każda nieruchomość CSS może być przeniesione, a podstawową zasadą jest to, że można przechodzić tylko przez Wartości bezwzględne. Na przykład nie można przejść między wysokością 0px do automatycznego. Przeglądarka nie może obliczyć pośrednich wartości przejściowych, więc zmiana właściwości jest natychmiastowa.

Answer 2

Trzeba przenieść tyle że nad CSS do jQuery naprawdę kontrolować animację: (Masz animate-body wewnątrz animate-inner i myślę, że masz nad skomplikowanych rzeczy

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

Answer 3

wysokość. atrybut powinien być zdefiniowany jako "complusary", aby płynne przejście strony do formy pracy było bardzo pierwsze, może nawet być 0px, ale nie może być automatyczne lub maksymalna wysokość jako 0px.