Bootstrap的旋轉木馬上的動畫高度變化（v2.3.2）

我試圖使用Bootstrap的旋轉木馬來處理不是相同高度的內容。高度將根據瀏覽器的寬度而有所不同，傳送帶下面有內容。我想用CSS來設置幻燈片之間的高度變化。在朋友的幫助下，我幾乎可以在FireFox中工作（第一次幻燈片跳轉，其餘的動畫），但Chrome瀏覽器中的滑動動畫出現了明顯的錯誤。Bootstrap的旋轉木馬上的動畫高度變化（v2.3.2）

任何輸入都會很棒，即使您認爲我應該以完全不同的方式處理高度動畫，請讓我知道！

這裏是JS和CSS，我認爲此事，但整個事情是JS小提琴：http://jsfiddle.net/tkDCr/

$('#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可以看到該錯誤顯然是由將變量next_h與來自'$（e.relatedTarget）.outerHeight（）;'的數據分配導致的。即使該變量未被使用，它仍然會破壞動畫。評論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; 
}

預先感謝您。

來源

2013-02-20 brant

您可以通過短超時延遲調用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/

來源

2013-03-02 19:30:28

謝謝。這工作得很好。我很抱歉，我沒有足夠的聲望來讚揚你！ – brant 2013-03-08 07:10:41

因爲應該使用boostrap 3.0'slide.bs.carousel'事件。 – 2014-10-26 07:08:00

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

來源

2013-03-30 15:09:33 dth

Bootstrap的旋轉木馬上的動畫高度變化（v2.3.2）

回答

相關問題