Twitter Bootstrap 100％高度手風琴「跳」

我試圖使用Twitter Bootstrap崩潰組件實現100％高度手風琴，完全按照question中所述。Twitter Bootstrap 100％高度手風琴「跳」

我正在手動設置.accordion-inner元素的高度，如answer中所述。

但是，當展開/摺疊面板時，我遇到了「彈性」行爲。我已經從.accordion-inner元素中刪除了所有填充/邊距/邊框以消除這種可能性。

它在IE10中最引人注目，但問題在Chrome中也很明顯。

看到這個example。

任何想法是什麼造成這種「跳躍」的行爲？

來源

2013-05-20 Brett Postin

它可以很好地與鉻 – Xavier

我已經在鉻中檢查和底部的「反彈」仍然存在。 –

是的，你是對的沒有注意到它..但壞消息是也有一個「反彈」的boostrap文件：檢查出http://twitter.github.io/bootstrap/javascript。html＃collapse – Xavier

遲到了，但是：

我有一個類似的問題，並注意到如果我從摺疊的元素下面的元素中刪除了一個margin-top，並將其替換爲padding-top，則過渡是平滑的。

所以 - 檢查相鄰元素的邊距，如果可能的話嘗試用填充替換它們。

來源

2014-07-31 23:02:17 TheHud

對我來說它是相似的，但它是.collapse div的邊緣。我有一個有兩個類的div：'.content'和'.collapse'。 '.content'有餘量。我將這兩個類分成兩個獨立的div，用'.collapse'封裝'.content' – MeltingDog

我認爲你看到的「跳躍」是由於.collapse類的CSS轉換引起的。

如果你看看這個SO線程Turning off Twitter Bootstrap Navbar Transition animation，你可以看到如何通過覆蓋CSS class'no-transition'禁用轉換。這不會停止動畫都在一起，但其加速使跳不太明顯...

添加no-transition到你的手風琴體元素..

<div id="collapseOne" class="accordion-body collapse in no-transition">

添加CSS。。

.no-transition { 
    -webkit-transition: height 0.001s; 
    -moz-transition: height 0.001s; 
    -ms-transition: height 0.001s; 
    -o-transition: height 0.001s; 
    transition: height 0.001s; 
}

更新plunker .. http://plnkr.co/edit/xnvDGcDd21iCu69wKSub?p=preview

來源

2013-05-20 11:19:42 ZimSystem

謝謝，但理想情況下，我想保留動畫（我不再看到）。你是說你不認爲這是可能的？ –

你可以嘗試通過增加轉換上的s來減慢動畫的速度，但是無論如何我認爲轉換引起了「跳躍」 – ZimSystem

HTML：

<td><a data-toggle="collapse" href="#text1" aria-expanded="false" aria-controls="#text1"</a> 
<div class="collapse" id="text1" aria-expanded="true" style="padding-top:5px"><img src="..."></div>

CSS：

.collapse.in{ 
    padding-bottom:5px; 
}

來源

2015-05-02 18:33:35 Fabio

我是有這種怪異的行爲，其中手風琴將擴大到比實際可見的內容大得多的高度，然後塌陷（跳）回到實際可見的內容高度。

原來，我的蛇腹主體爲面板有幾個空html元素，這在我的情況下是一個與divs幾col-sm-4類裏面什麼都沒有他們。一旦我評論他們這個跳躍行爲就停止了。希望這可以幫助有類似問題的人。

來源

2016-05-23 14:53:41

Twitter Bootstrap 100％高度手風琴「跳」

回答

相關問題