Animacja zmiany wysokości na karuzeli Bootstrapa (v2.3.2)

Question

Próbuję użyć karuzeli Bootstrap do obsługi treści, która nie ma tej samej wysokości. Wysokości różnią się w zależności od szerokości przeglądarek, a zawartość znajduje się poniżej karuzeli. Chciałbym użyć CSS do animacji zmiany wysokości pomiędzy slajdami. Z pomocą przyjaciela prawie działam w FireFox (pierwsze skoki slajdów, reszta się ożywiają), ale oczywisty błąd ma miejsce w przypadku przesuwania animacji w Chrome.

Wszystkie dane wejściowe będą świetne, nawet jeśli uważasz, że powinnam obsłużyć animację wysokości w zupełnie inny sposób, daj mi znać!

Oto JS i CSS, które myślę, że sprawa, ale cała sprawa jest na JS Fiddle: http://jsfiddle.net/tkDCr/

JS

$('#myCarousel').carousel({ 
    interval: false 
}); 

$('#myCarousel').bind('slid', function(e) { 
    console.log('slid',e); 
}); 

$('#myCarousel').bind('slide', function(e) { 
    console.log('slide',e); 
    var next_h = $(e.relatedTarget).outerHeight(); 
    console.log(next_h); 
    $('.carousel').css('height', next_h); 
}); 

komentując na linie 12 i 13 JavaScriptu ciebie widać, że błąd jest wyraźnie spowodowany przez przypisanie zmiennej next_h z danymi z '$ (e.relatedTarget) .outerHeight();'. Nawet jeśli zmienna nie jest używana, nadal powoduje przerwanie animacji. Komentowanie 11, 12 i 13 pokazuje, jak działa karuzela.

CSS

.carousel { 
    width: 80%; 
    margin-left: auto; 
    margin-right: auto; 
    background: lightgoldenrodyellow; 
    -webkit-transition: height .5s ease; 
    -moz-transition: height .5s ease; 
    -ms-transition: height .5s ease; 
    -o-transition: height .5s ease; 
    transition: height .5s ease; 
} 

Z góry dziękuję.

Answer 1

Można obejść ten problem poprzez opóźnianie wezwanie do outerHeight() przez krótki timeout:

$('#myCarousel').bind('slide', function(e) { 
    setTimeout(function() { 
     var next_h = $(e.relatedTarget).outerHeight(); 
     $('.carousel').css('height', next_h); 
    }, 10); 
}); 

Ponadto, prawdopodobnie chcesz ustawić wysokość .carousel coś w css, w przeciwnym razie pierwsze przejście rozpocznie się na wysokości 0, dzięki czemu spadnie z góry.

zaktualizowałem swój skrzypce tutaj: http://jsfiddle.net/tkDCr/3/

Answer 2

// animate do the same - timeout is not needed 

$('#myCarousel').carousel(); 
$('#myCarousel').bind('slide', function(e) { 
     $('#myCarousel').animate({height: $(e.relatedTarget).outerHeight()}); 
});   

// After using animate, there is no need for transition in css (or height)