質問: ``` Hello ``` ``` #box { height: 0; transition: width 300ms ease; } #box.hover { height: 100px; } ``` 非常に初歩的な質問ですので説明しているウェブサイトのURLを教えていただけるだけでも結構です。 上のidがboxの要素をホバーすると、中のとが取り残されます。 #### Helloも一緒にスライドアップ・スライドダウンしてほしいです。 transitionはcssプロパティを変更するアニメスピードをコントロールするためのものだから、boxのheightが0なのにh1やinputのheightが0にならないのが問題なのでしょうか?ではh1やinputにもtransitionを設定せなばならないのでしょうか?アコーディオンのようにdiv内の要素がたくさんある場合はそれら全てにtransitionを設定しないと行けないのでしょうか? react-transition-groupのCSSTransitionでも、velocity-reactでも、同じことが起こるのですが調べ方が悪いからなのか、どうすればよいかわかりません。こういう場合どうすれば良いのでしょうか? 下のようなことになります。(下ではvelocity-reactを使ってます。) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/0620b176f224580a826dbdb85bf1908f.gif) cssにoverflow: hiddenを追加した場合。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/f6db135913945a349f816ecc01312d25.gif)
回答: > > boxのheightが0なのにh1やinputのheightが0にならないのが問題なのでしょうか? > > > 違います。特に指定しない場合、`overflow: visible`となっているので、ボックスの高さが足りない場合、中身はボックスから**はみ出します**。 `overflow: hidden`を適用してみてはどうでしょうか? jsFiddleでの実装例