動的な高さのスムーズなトランジション

はじめに

この実験では、要素の高さが未知の場合に、その高さを0からautoにスムーズに変化させる方法を検討します。この技術は、ドロップダウンメニュー、アコーディオン、その他のアニメーション付きコンテンツの作成に役立ちます。CSS のtransition、max-height、およびoverflowプロパティと、高さ値を動的に設定するための JavaScript を使用することで、シームレスで視覚的に魅力的なユーザーエクスペリエンスを作成できます。

高さのトランジション

VM 内には既にindex.htmlとstyle.cssが用意されています。

このコードスニペットは、要素の高さが未知の場合に、以下の手順を行うことで、その高さを0からautoにトランジションさせます。

• transitionプロパティを使用して、max-heightの変更が0.3秒の期間でトランジションすることを指定します。
• overflowプロパティをhiddenに設定して、非表示になった要素のコンテンツがそのコンテナをはみ出さないようにします。
• max-heightプロパティを使用して、初期の高さを0に指定します。
• :hover疑似クラスを使用して、max-heightを JavaScript で設定された--max-height変数の値に変更します。
• Element.scrollHeightプロパティとCSSStyleDeclaration.setProperty()メソッドを使用して、--max-heightの値を要素の現在の高さに設定します。
• 注： このアプローチは、各アニメーションフレームで再フローを引き起こし、トランジションする要素の下に多数の要素がある場合、遅延を引き起こす可能性があります。

<div class="trigger">
  Hover over me to see a height transition.
  <div class="el">Additional content</div>
</div>

.el {
  transition: max-height 0.3s;
  overflow: hidden;
  max-height: 0;
}

.trigger:hover > .el {
  max-height: var(--max-height);
}

let el = document.querySelector(".el");
let height = el.scrollHeight;
el.style.setProperty("--max-height", height + "px");

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！あなたは高さのトランジションの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習できます。