Animate thay đổi chiều cao trên Bootstrap's Carousel (v2.3.2)

Question

Tôi đang cố gắng sử dụng Bootstrap's Carousel để xử lý nội dung không có cùng chiều cao. Chiều cao sẽ khác nhau dựa trên chiều rộng của trình duyệt và có nội dung bên dưới băng chuyền. Tôi muốn sử dụng CSS để tạo hiệu ứng thay đổi độ cao giữa các trang trình bày. Với một số trợ giúp từ một người bạn, tôi gần như đã làm việc này trong FireFox (slide đầu tiên, phần còn lại animate) nhưng một lỗi rõ ràng đang xảy ra với hoạt ảnh trượt trong Chrome.

Mọi đầu vào đều tuyệt vời, ngay cả khi bạn cho rằng tôi nên xử lý hoạt ảnh chiều cao theo cách hoàn toàn khác, vui lòng cho tôi biết!

Đây là JS và CSS mà tôi nghĩ rằng vấn đề, nhưng toàn bộ điều là trên 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); 
}); 

By ý kiến ​​ra đường 12 và 13 của JavaScript bạn có thể thấy rằng lỗi rõ ràng đang được gây ra bằng cách gán biến next_h với dữ liệu từ '$ (e.relatedTarget) .outerHeight();'. Ngay cả khi biến không được sử dụng, nó vẫn phá vỡ hoạt ảnh. Nhận xét ra 11,12 và 13, sẽ cho bạn thấy cách băng chuyền hoạt động bình thường.

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

Cảm ơn bạn trước.

Answer 1

Bạn có thể khắc phục vấn đề bằng cách kéo dài thời gian cuộc gọi đến outerHeight() bởi một thời gian chờ ngắn:

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

Ngoài ra, bạn có thể muốn thiết lập chiều cao của .carousel một cái gì đó trong css, nếu không quá trình chuyển đổi đầu tiên sẽ bắt đầu ở độ cao 0, làm cho nó giảm từ trên xuống.

tôi cập nhật fiddle của bạn ở đây: 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)