過渡彈性增長與動態內容高度

Question

我正在顯示一個項目列表。 每個項目都有一個標題和一些內容。 單擊其標題時，每個項目的高度會展開/折疊。 每個項目內容的高度是動態的。

我有以下代碼（如下所示）有效。 但是，用戶點擊.header和轉換開始之間會有輕微的延遲。

這種延遲似乎是由我使用max-height: min-content引入的。 我相信在添加/刪除.isCollapsed類之后，瀏覽器需要花一點時間來重新計算內容的高度。

我想知道是否有更正確的方法來實現這種效果？

如果我刪除max-height: min-content那么.item上的flex: 1會導致每個項目在展開時具有相同的高度。 這是不希望的。 我希望每個項目的高度適合其內容。

我不想要一個需要我用JavaScript或類似方法測量文本的解決方案。 目標是利用flexbox在不知道content高度的情況下執行轉換。

 $('.header').click(function() { $(this).parent().toggleClass('isCollapsed'); }); 

 *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; } ul, li { list-style: none; margin: 0; padding: 0; } .items { display: flex; flex-direction: column; height: 100%; flex: 1; } .item { display: flex; flex-direction: column; overflow: hidden; min-height: 48px; transition: flex-grow 1s; flex: 1; max-height: min-content; } .header { display: flex; height: 48px; padding: 16px; align-items: center; flex-shrink: 0; } .isCollapsed { flex-grow: .001; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class='items'> <li class='item'> <div class='header'>Item A Header</div> <div class='content'>Item A Content This content is</br> really</br> really</br> really</br> really</br> long. </div> </li> <li class='item'> <div class='header'>Item B Header</div> <div class='content'> Item B Content This content is</br> short. </div> </li> </ul> 

Answer 1

在下面的代碼塊中，有一些提高效率的空間。

.item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 48px;
  transition: flex-grow 1s;
  flex: 1;
  max-height: min-content;
}

你正在使用min-height和flex 。 但是對於flex ，你真的不需要min-height 。

試試這個：

.item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* min-height: 48px; */
  transition: flex-grow 1s;
  flex: 1 0 48px; /* adjusted */
  max-height: min-content;
}

延遲已經消失了。

DEMO

我還更正了<br>標簽（ </br>無效）。

Answer 2

這是一個版本，它支持不支持min-content瀏覽器。

人們總是可以使用max-height和transition-duration值來實現更平滑的過渡，但為了使其完美，並假設content高度不是靜態的，我（今天）看不到沒有腳本的情況。

我注意到，在Chrome上（使用min-content ）奇怪的是，可見的過渡效果在不同視口大小上的速度不同，而max-height版本則沒有。

 $('.header').click(function() { $(this).parent().toggleClass('isCollapsed'); }); 

 *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; } ul, li { list-style: none; margin: 0; padding: 0; } .items { display: flex; flex-direction: column; height: 100%; flex: 1; } .item { display: flex; flex-direction: column; overflow: hidden; min-height: 48px; transition: max-height .5s; flex: 0 0 auto; max-height: 300px; } .header { display: flex; height: 48px; padding: 16px; align-items: center; flex-shrink: 0; } .isCollapsed { max-height: 48px; transition: max-height .2s; } @supports (max-height: min-content) { .item { max-height: min-content; transition: flex-grow .6s; flex: 1; } .isCollapsed { max-height: min-content; flex: .001; transition: flex-grow .3s; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class='items'> <li class='item'> <div class='header'>Item A Header</div> <div class='content'>Item A Content This content is<br> really<br> really<br> really<br> really<br> long. </div> </li> <li class='item'> <div class='header'>Item B Header</div> <div class='content'> Item B Content This content is<br> short. </div> </li> <li class='item'> <div class='header'>Item C Header</div> <div class='content'>Item C Content This content is<br> really<br> really<br> really<br> really<br> long. </div> </li> </ul>