ブートストラップのカルーセルのアニメーションの高さの変化（v2.3.2）

Question

私は同じ高さではないコンテンツを扱うためにブートストラップのカルーセルを使用しようとしています。高さはブラウザの幅に応じて異なり、カルーセルの下にコンテンツがあります。スライド間の高さの変化をアニメーション化するためにCSSを使用したいと思います。友人の助けを借りて、私はFireFox（これは最初のスライドジャンプ、残りのアニメーション）でほとんど動作しますが、Chromeのスライドアニメーションでは明らかなバグが発生しています。

全く異なる方法で高さのアニメーションを処理する必要があると思われる場合でも、どんな入力も素晴らしいと思います。教えてください。

ここで私は問題だと思うJSとCSSですが、全部はJSフィドルである：JavaScriptのあなたのライン12と13をコメントアウトすることで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); 
}); 

変数$ {e.relatedTarget} .outerHeight（）;のデータを変数next_hに代入することによってバグが明らかに発生していることがわかります。変数が使用されていない場合でも、アニメーションは中断されます。 11月12日と13日のコメントは、どのようにカルーセルが正常に機能するかを示します。

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

CSSは、事前にありがとうございます。

Answer 1

あなたは短いタイムアウトでouterHeight（）への呼び出しを遅らせることによって問題を回避することができます

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

はまた、あなたはおそらくCSSで何かに.carouselの高さを設定したい、そうでない場合最初の遷移は高さ0で始まり、上から降下します。私はここにあなたのフィドルを更新

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