Bootstrap 的 Carousel (v2.3.2) 上的动画高度变化

Question

我正在尝试使用 Bootstrap 的 Carousel 来处理高度不同的内容。高度将根据浏览器宽度而有所不同，并且轮播下方有内容。我想使用 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;
}

提前谢谢你。

Answer 1

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

Answer 2

您可以通过将调用 outerHeight() 延迟一小段超时来解决此问题：

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

另外，您可能希望将 .carousel 的高度设置为 css 中的某个值，否则第一个过渡将从高度 0 开始，使其从顶部下降。

我在这里更新了你的小提琴：http://jsfiddle.net/tkDCr/3/