具有CSS過渡的可擴展Div

Question

我的頁面頂部有一個div ，包含一些標題文本，在mouseenter ，應該展開（高度），以顯示一些較小的文本。 然后，在mouseleave ，它應該縮回。 這比聽起來更難......

解決方案必須：

1. 從高處開始，只適合標題，高度適合所有文本。
2. 從一個過渡到另一個。
3. 嘗試使用純CSS。
4. 如果鼠標離開，則擴展動畫暫停，反之亦然（默認為CSS，但不是jQuery）。

我試過了：

1. 使用:hover在我的樣式表中，從設置的像素值更改為auto ， 如此問題中所示 （但在我的中它是純CSS）。 這沒有過渡。
2. 在擴展時使用設置高度，這對不同的視口大小不起作用。
3. 使用max-height ，而且擴展到更大的東西比實際擴大div會得到，如在此問題 。 這意味着轉換不能正常工作，並且在不同設備上看起來不同。
4. 使用jQuery .animate() ，使用auto的像素值，然后創建一個轉換，如本問題所示 ，但動畫必須在開始下一個之前完成，這意味着一系列動畫可以持續很長時間用戶的鼠標后，如果遠離div 。

請在此處查看以上四個示例。

如上所述，純CSS將是理想的，但如果不可能，我會很好用JavaScript（我更喜歡jQuery）。

謝謝！ :)

Answer 1

我不知道任何純粹的CSS解決方案 - 將值轉換為auto是規范中沒有包含的內容; 我認為這甚至是基於可能存在實施問題的明確決定。

但是對於一個“簡單”的jQuery解決方案，我只是將段落內容包裝在一個額外的范圍內，將初始段落高度設置為0並溢出：隱藏，保留高度到位的過渡 - 然后讓jQuery只做一個，讀取span元素的高度，設置段落的高度，然后再次將其設置為0以再次淡出文本。

.details {
  height: 0;
  margin: 0; 
  overflow: hidden;
  transition: height 1s;
}

$("div").mouseenter(function() {
  $(this).find('p').css('height', $(this).find('span').height());
})

$("div").mouseleave(function() {
  $(this).find('p').css('height', 0);
})

這樣，CSS仍然通過transition來處理高度變化的“繁重工作”（那 威力 應該在瀏覽器中進行優化，而jQuery / JavaScript僅用於為它提供需要知道該做什么的小“輕推”。 （非常肯定jQuery在內部做同樣的事情，現在使用animate() ，如果瀏覽器支持它 - 增加的好處就是jQuery負責回退實現，如果一個真正舊的瀏覽器不支持transition ;在我的解決方案中高度會立即改變，沒有任何過渡。）

https://jsfiddle.net/ypwu9n0g/7/

請注意，在該示例中，所有四個項目的方法都相同，我沒有費心去更改文本內容;-)

Answer 2

嘗試使用css :hover

[id^="title"] {
  height: 1em;
  overflow: hidden;
  -webkit-transition: height 1s;
  /* Transitions not working */
  transition: height 1s;
}

[id^=title]:hover {
  height: 10em;
}

Answer 3

采用height ， line-height ， font-size ， opacity css方法

 [id^="title"] p { overflow:hidden; font-size:0em; line-height:0em; /* height:0px; */ opacity:0; -webkit-transition: height 1s; transition: /* height 1s,*/ opacity 1s, line-height 0.1s; } [id^="title"]:hover p { /* height:auto; */ opacity:1; line-height:1em; font-size:1em; opacity:1; text-overflow: ellipsis; } 

 <div id="title1">Title 1<p id="details">Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition.</p></div> <div id="title2">Title 2<p id="details">Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size...</p></div> <div id="title3">Title 3<p id="details">Height working, but transitions looking different on different viewport sizes. Height working, but transitions looking different on different viewport sizes. Height working, but transitions looking different on different viewport sizes. Height working, but transitions looking different on different viewport sizes. Height working, but transitions looking different on different viewport sizes. </p></div> <div id="title4">Title 4<p id="details">Height and transition working - just one catch - the animation does not pause when a new one starts, creating a kind of animation stack that is annoying... Height and transition working - just one catch - the animation does not pause when a new one starts, creating a kind of animation stack that is annoying... Height and transition working - just one catch - the animation does not pause when a new one starts, creating a kind of animation stack that is annoying... </p></div> 

jsfiddle https://jsfiddle.net/ypwu9n0g/17/