CSS3トランジションの展開/折りたたみを追加する

Question

拡大/折りたたみトランジションを追加するにはどうすればよいですか？

http://jsfiddle.net/Bq6eK/1

Answer 1

これは自動的に高さを調整し、私のソリューションです：http://jsfiddle.net/9ccjE/

私が投稿r3bel回避策を使用：Can you use CSS3 to transition from height:0 to the variable height of content?

Answer 2

これは動作するはずです、あまりにもしばらく試してみました..：D

css3 animation jsfiddle

Answer 3

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

私は私が書いた、このソリューションのためのあなたのコードを変更しませんでした代わりに自分自身。私の解決策はあなたの求めるものではありませんが、既存の知識でそれを構築することができます。私もコードにコメントしたので、あなたは正確に私が変更に何をしているのか知っています。

"JavaScriptで高さを設定しない"という解決策として、私は 'maxHeight'をJS関数のパラメータtoggleHeightとしました。今度は、拡張可能なクラスのdivごとにHTMLで設定できます。

私はフロントエンドの言語に精通していないし、アニメーションが始まる前に最初に[表示/非表示]ボタンを2回クリックする必要があるという問題があります。私はそれが焦点の問題だと思う。

私の解決策の他の問題は、divをクリックしてドラッグするだけで表示/非表示ボタンを押さずに隠れたテキストが実際に何であるかを知ることができるということです。目に見える空間へ。

私がやったことの上に次のステップの提案は、表示/非表示ボタンが動的に変化するようにすることです。 JSでテキストを表示したり隠したりすることについて既に知っていることを使って、そのことを行う方法を理解することができると思います。

Answer 4

ここでは、JSをまったく使用しないソリューションです。代わりにcheckboxesを使用します。

あなたのCSSにこれを追加することで、チェックボックスを非表示にすることができます：

.container input{ 
    display: none; 
} 

そして、それはbuttonのように見えるようにいくつかのスタイルを追加します。

Here's the source code that I modded.

Answer 5

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">