添加CSS3過渡展開/摺疊

寫成[這裏]（http://stackoverflow.com/a/3512194/1517380）這是不可能的atm（因爲你想有一個動畫的權利？）除了[這裏描述的昂貴的解決方法]（http://stackoverflow.com/questions/3149419/can-you-use-css3-to-transition-from-height0-to-the-variable-height-of-content ） – r3bel 2012-07-17 01:18:08

我編輯了你的jsfiddle，併爲動態高度添加了一個「解決方法」，但是每次當下拉高度隨着javascript改變時，你必須得到下拉的高度：[jsfiddle]（http://jsfiddle.net/Bq6eK/217 /）。我不能保證你能正確地使用所有的瀏覽器：D – r3bel 2012-07-17 23:55:52

http://jsfiddle.net/Bq6eK/215/

我不修改代碼的這個解決方案，我寫我的擁有。我的解決方案並不完全符合你的要求，但也許你可以用現有的知識來建立它。我也評論了代碼，所以你知道我正在做什麼改變。

作爲「避免在JavaScript中設置高度」的解決方案，我剛剛在JS函數中爲'toggleHeight'創建了'maxHeight'參數。現在可以在HTML中爲每個div的可擴展類設置它。

我會先說這個，我對前端語言沒有超級經驗，並且有一個問題，在動畫開始之前，我需要先點擊兩次「顯示/隱藏」按鈕。我懷疑這是一個焦點問題。

我的解決方案的另一個問題是，如果不按下顯示/隱藏按鈕，只需單擊div並向下拖動，就可以真正弄清楚隱藏文本是什麼，您可以突出顯示不可見的文本並粘貼它到可見的空間。

我對我所做的最後一步的建議是使顯示/隱藏按鈕動態變化。我想你可以弄清楚如何用你已經知道的關於用JS顯示和隱藏文本的知識。

來源

2012-07-17 08:48:27 ayang9

我做了兩個小修改：http://jsfiddle.net/Bq6eK/215/。 'onclick =「...」'應該返回false，並且應該直接爲元素設置高度，而不是在CSS中。否則，必須點擊兩次以打開框，因爲'elem.style'只包含直接爲元素設置的樣式，而不包含有效樣式。 – kay 2012-07-17 21:20:29

謝謝！我現在知道了。 – ayang9 2012-07-17 21:34:42

這是一個根本不使用JS的解決方案。它使用checkboxes代替。

您可以通過添加這對你的CSS隱藏複選框：

.container input{ 
    display: none; 
}

，然後添加一些造型，使它看起來像一個button。

Here's the source code that I modded.

來源

2012-07-20 19:30:50 ayang9

該解決方案不會根據文本數量應用高度。在CSS中，你必須決定被檢查的div的高度：'.ac-container input：checked〜article.ac-small { \t height：140px; 「我需要一個解決方案，根據內容應用高度。 – Felix 2012-08-06 22:40:21

OMG，我試圖找到一個簡單的解決方案，這幾個小時。我知道代碼很簡單，但沒有人提供給我我想要的。最後，我們開始研究一些示例代碼，並簡化了任何人都可以使用的JQuery。簡單的JavaScript和CSS和HTML。爲了動畫的工作，你必須設置高度和寬度或動畫不會工作。發現困難的方式。

<script> 
     function dostuff() { 
      if (document.getElementById('MyBox').style.height == "0px") { 

       document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 200px; width: 200px; transition: all 2s ease;"); 
      } 
      else { 
       document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 0px; width: 0px; transition: all 2s ease;"); 
      } 
     } 
    </script> 
    <div id="MyBox" style="height: 0px; width: 0px;"> 
    </div> 

    <input type="button" id="buttontest" onclick="dostuff()" value="Click Me">

來源

2018-03-06 22:55:30 Deathstalker

添加CSS3過渡展開/摺疊

回答

相關問題