CSStransitionなどでtransitionがdiv要素の中の要素に効かない。

Question

<div id="box">
  <h1>Hello</h1>
  <input>
</div>

#box {
height: 0;
transition: width 300ms ease;
}

#box.hover {
height: 100px;
}

非常に初歩的な質問ですので説明しているウェブサイトのURLを教えていただけるだけでも結構です。
上のidがboxの要素をホバーすると、中の<h1>と<input>が取り残されます。

Helloも一緒にスライドアップ・スライドダウンしてほしいです。

transitionはcssプロパティを変更するアニメスピードをコントロールするためのものだから、boxのheightが0なのにh1やinputのheightが0にならないのが問題なのでしょうか？ではh1やinputにもtransitionを設定せなばならないのでしょうか？アコーディオンのようにdiv内の要素がたくさんある場合はそれら全てにtransitionを設定しないと行けないのでしょうか？

react-transition-groupのCSSTransitionでも、velocity-reactでも、同じことが起こるのですが調べ方が悪いからなのか、どうすればよいかわかりません。こういう場合どうすれば良いのでしょうか？

下のようなことになります。（下ではvelocity-reactを使ってます。）

cssにoverflow: hiddenを追加した場合。

Answer 1

boxのheightが0なのにh1やinputのheightが0にならないのが問題なのでしょうか？

違います。特に指定しない場合、overflow: visibleとなっているので、ボックスの高さが足りない場合、中身はボックスからはみ出します。

overflow: hiddenを適用してみてはどうでしょうか？

jsFiddleでの実装例

Comments

[maisumakun]

なお、元のコードではtransition: widthとなっていてheightは即時に変更されたので、それも修正しています。