概要
cssとjsで overflow:hidden の要素を上下に開閉アニメーションします。
動作の流れ
- 同じ要素をhiddenでクローン作成
- 高さを取得
- 取得した高さを
max-heightとして設定 - cssの
transitionでイイ感じにアニメーション
ソースコード
See the Pen cssとjsで overflow:hidden の要素を上下に開閉アニメーション by toromo (@toromoon) on CodePen.
More than 3 years have passed since last update.
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme