<details>
  <summary>アコーディオンタイトル</summary>
  <div class="content">
    <p>
      lorem ipsum dolor sit amet、condsetur apisicing elit。 Modi Unde、ex remは、autem aliquid veniam quis tomeibus rupudiandae illo、Nostrum、pariatur quae！ Animi Modi Dignissimos Corurdi Placeeat boluptatumで！
    </p>
  </div>
</details>

アコーディオンクラス

コードの再利用性を向上させるには、アコーディオンクラスを作成する必要があります。これにより、すべてを使用できます<details></details>要素にnew Accordion()を呼び出します。

クラスアコーディオン{
  コンストラクター（el）{}
  onclick（e）{}
  縮む（） {}
  開ける（） {}
  拡大する（） {}
  onanimationfinish（open）{}
}

constructor()

コンストラクターは、各アコーディオンに必要なデータを保存するために使用されます。

コンストラクター（el）{
  this.el = el;
  this.summary = el.queryselector（ 'summary'）;
  this.content = el.queryselector（ '。コンテンツ'）;
  this.Animation = null;
  this.isslosing = false;
  this.isexpanding = false;
  this.summary.addeventlistener（ 'click'、（e）=> this.onclick（e））;
}

onClick()

onClick()関數(shù)では、要素がアニメーション化されているかどうかを確認します（閉じるか展開）。要素がアニメーション化されている間にユーザーがアコーディオンをクリックした場合、このチェックを行う必要があります。クリック速度が速すぎる場合、アコーディオンが完全に拡張されて完全に閉じてジャンプすることを望まない。<details></details>要素が開かれると、ブラウザはそれにopenプロパティを追加します。 this.el.openを使用して、このプロパティの価値を取得できます。

 onclick（e）{
  E.PreventDefault（）;
  this.el.style.overflow = 'hidden';
  if（this.isslosing ||！this.el.open）{
    this.open（）;
  } else if（this.isexpanding || this.el.open）{
    this.shrink（）;
  }
}

shrink()

このshrink()関數(shù)は、WAAPIの.animate()関數(shù)を使用します。詳細については、MDNドキュメントを読むことができます。 WAAPIはCSS @keyframesに非常に似ています。アニメーションのキーフレームの開始と終了を定義する必要があります。この例では、2つのキーフレームのみが必要です。1つ目は要素の現(xiàn)在の高さで、2つ目はアコーディオンが閉じた後の高さです?，F(xiàn)在の高さは、 startHeight変數(shù)に保存されます。近い高さは、 endHeight変數(shù)に保存され、<summary></summary>身長。

縮む（） {
  this.isclosing = true;
  const startheight = `$ {this.el.offsetheight} px`;
  const endheight = `$ {this.summary.offsetheight} px`;
  if（this.Animation）{
    this.animation.cancel（）;
  }
  this.Animation = this.el.anime（{{
    高さ：[startheight、endheight]
  }、{
    期間：400、
    使いやすさ：「簡単」
  }）;
  this.animation.onfinish =（）=> this.onimationfinish（false）;
  this.animation.oncancel =（）=> this.isclosing = false;
}

open()

open()関數(shù)は、アコーディオンを拡張したいときに呼び出されます?，F(xiàn)在、この関數(shù)はアコーディオンアニメーションを制御していません。最初に、計算します<details></details>要素の高さと、インラインスタイルを使用して要素に適用します。完了したら、 openプロパティを設定してコンテンツを表示することができますが、 overflow: hiddenと固定された高さを設定しているため、コンテンツはまだ隠されています。次に、次のフレームがexpand()関數(shù)を呼び出し、要素のアニメーションを作成するのを待ちます。

開ける（） {
  this.el.style.height = `$ {this.el.offseTheight} px`;
  this.el.open = true;
  window.requestanimationframe（（）=> this.expand（））;
}

expand()

expand()関數(shù)はshrink()関數(shù)に似ていますが、現(xiàn)在の高さから近い高さまでではなく、要素の高さから端の高さまでアニメーション化します。端の高さはに等しい<summary></summary>高さと內(nèi)部コンテンツの高さ。

拡大する（） {
  this.isexpanding = true;
  const startheight = `$ {this.el.offsetheight} px`;
  const endheight = `$ {this.summary.offseetheight this.content.offseeth} px`;
  if（this.Animation）{
    this.animation.cancel（）;
  }
  this.Animation = this.el.anime（{{
    高さ：[startheight、endheight]
  }、{
    期間：400、
    使いやすさ：「簡単」
  }）;
  this.animation.onfinish =（）=> this.onimationfinish（true）;
  this.animation.oncancel =（）=> thisexpanding = false;
}

onAnimationFinish()

この関數(shù)は、アニメーションが崩壊または拡張されたときに呼び出されます。ご覧のとおり、アコーディオンがオンになったときにtrueに設定されているパラメーターがopenいるため、ブラウザでは処理されなくなったため、 open HTML屬性を要素に設定できます。

 onanimationfinish（open）{
  this.el.open = open;
  this.Animation = null;
  this.isslosing = false;
  this.isexpanding = false;
  this.el.style.height = this.el.style.overflow = '';
}

アコーディオンをセットアップします

ほとんどのコードを行いました！

殘っているのは、それぞれのHTMLだけです<details></details>要素はアコーディオンクラスを使用します。これを行うには、使用します<details></details>タグにquerySelectorAllを使用し、各要素の新しいAccordionインスタンスを作成します。

 document.QuerySelectorall（ '詳細'）。foreach（（el）=> {
  新しいアコーディオン（el）;
}）;

知らせ

近い高さと開いた高さを計算するには、確実にする必要があります<summary></summary>常にコンテンツと同じ高さを持っています。

たとえば、試してはいけません<summary></summary>電源を入れたときにパディングを追加します。これにより、アニメーションプロセス中にジャンプが発生する可能性があります。內(nèi)部コンテンツにも同じことが言えます。固定された高さが必要です。アニメーションの開口部中に高さの変化があるコンテンツを避ける必要があります。

また、しないでください<summary></summary>高さキーフレームを計算しないため、コンテンツ間にマージンを追加します。代わりに、コンテンツにパディングを直接使用して、間隔を追加します。

要約します

それだけです、私たちはライブラリを必要とせずにJavaScriptを使用して美しいアコーディオンアニメーションを作成しました！

Image Path /uploads/20250331/174338369667e9ec90190a3.jpg 、実際の畫像パスに置き換える必要があることに注意してください。畫像ファイルにアクセスまたは処理できないため、元の形式のみを保持できます。