Bootstrap のカルーセルを使用して、同じ高さではないコンテンツを処理しようとしています。高さはブラウザーの幅によって異なり、カルーセルの下にコンテンツがあります。CSS を使用して、スライド間の高さの変化をアニメーション化したいと思います。友人の助けを借りて、FireFox でほぼ動作するようになりました (最初のスライドがジャンプし、残りがアニメーション化されます) が、Chrome のスライド アニメーションで明らかなバグが発生しています。
高さのアニメーションをまったく別の方法で処理する必要があると思われる場合でも、お知らせください。
これが私が重要だと思うJSとCSSですが、すべては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);
});
JavaScript の 12 行目と 13 行目をコメント アウトすると、'$(e.relatedTarget).outerHeight();' からのデータを変数 next_h に割り当てることによってバグが明らかに引き起こされていることがわかります。変数が使用されていない場合でも、アニメーションは中断されます。11、12、および 13 をコメントアウトすると、カルーセルが正常に機能する様子がわかります。
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;
}
前もって感謝します。