<details name="exclusive">
  <summary>Section 1</summary>
  <p>Content for section 1.</p>
</details>
<details name="exclusive">
  <summary>Section 2</summary>
  <p>Content for section 2.</p>
</details>

この動作はネイティブであり、最新のブラウザでシームレスに動作します!

CSS を使用してスムーズなアニメーションを追加する

開始と終了のトランジションをよりスムーズにするには、interpolate-size やtransition-behavior などの最新の CSS プロパティを使用できます。

主要なプロパティ

• interpolate-size: 固有のサイズ (自動など) と固定サイズの間のアニメーションを許可します。 このプロパティは現(xiàn)在 Chrome でのみサポートされています。
• transition-behavior:allow-discrete に設定すると、可視性や表示など通常アニメーション化できないプロパティは、即座に更新されずに待機します。

スタイリング例

デモで使用される CSS の完全な例は次のとおりです:

details {
  interpolate-size: allow-keywords;
  overflow: clip;
  margin-top: 0.125em;
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
  border-radius: 3px;
}

details summary {
  display: block;
  cursor: pointer;
  position: relative;
  padding: 0.5em 0.5em 0.5em 0.7em;
  background: #ededed;
  color: #2b2b2b;
  border-radius: 3px 3px 0 0;
}

details:not([open]) summary:hover,
details:not([open]) summary:focus {
  background: #f6f6f6;
  color: #454545;
}

details[open] summary {
  outline: 1px solid #003eff;
  background: #007fff;
  color: #ffffff;
}

details[open]::details-content {
  height: auto;
}

details::details-content {
  height: 0;
  overflow-y: clip;
  transition: content-visibility 475ms allow-discrete, height 475ms;
}

details main {
  padding: 1em 2.2em;
}

仕組み

1. 高さアニメーション: interpolate-size プロパティにより、高さ: 0 (閉じた狀態(tài)) と高さ: 自動 (開いた狀態(tài)) の間のスムーズな移行が可能になります。ただし、これは現(xiàn)在 Chrome でのみサポートされています。
2. 可視性遷移: 遷移動作プロパティにより、可視性の変化がシームレスに見えるようになります。

デモ: すべてを統(tǒng)合する

完全な実裝は次のとおりです:

ブラウザのサポート

• interpolate-size: 現(xiàn)在、Chrome でのみサポートされています。
• 遷移動作: ほとんどの最新ブラウザでサポートされています。

サポートされていないブラウザの場合、アニメーションは正常にフォールバックし、アコーディオンはスムーズな遷移がなくても機能し続けます。

結(jié)論

<概要>要素を最新の CSS と組み合わせることで、インタラクティブなアコーディオンを作成するための軽量でアクセスしやすいソリューションが提供されます。これらの新しい機能強化により、最新の Web プロジェクトにとってさらに魅力的なものになります。デモを試して、あなたのアコーディオンに新鮮で洗練された外観を與えてください!

読んでいただきありがとうございます。開発外で私とつながりたい場合は、私の twitter、bsky、linkedin に連絡してください?

以上がネイティブ HTML: アコーディオンの再考の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。