エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
height 0pxからautoのアニメーションが効かない問題をごまかしたい | WEMO
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
height 0pxからautoのアニメーションが効かない問題をごまかしたい | WEMO
CSSのheightプロパティを 0px → auto(もしくはその逆の auto → 0px)へtransitionでアニメーションさせ... CSSのheightプロパティを 0px → auto(もしくはその逆の auto → 0px)へtransitionでアニメーションさせたいが、height:autoを使うと動作しないという問題がある。 これはアコーディオンを実装する時にだれしもがぶち当たる問題として有名ですが、それでもなんとかCSSだけでごまかす方法はないだろうか、というのを考えてみました。 (※ 「CSSだけ」 = JS はクラスの付け外しだけ という意。) 今回例として紹介するコードはあくまで動作部分のみを書いており、アクセシビリティなどの配慮はゼロなので実案件にコピーして使ったりはしないでください paddingをアニメーションしてごまかす アコーディオンコンテンツの上下にpaddingをセットしておき、そのpadding-top,paddinf-bottomをクローズ時に0pxへtransitionさせる方法で