WAAPIを使用して詳細要素をアニメーション化する方法

WebアニメーションAPIを使用してネイティブにします<details></details>要素のアニメーション効果

ウェブサイトで最も一般的なアニメーション要件の1つは、アコーディオンスタイルの拡張と閉鎖効果です。興味深いことに、jQueryのslideDown()関数は、2006年の最初のバージョンとして早くも存在していました。

この記事では、WebアニメーションAPIをネイティブとして使用する方法について説明します<details></details>アニメーション要素。

HTML構造

まず、このアニメーションを実装するために必要なHTMLタグ構造を見てみましょう。

<details></details>要素には必要です<summary></summary>要素。<summary></summary>アコーディオンが折りたたまれているときに見えるものです。<details></details>他のすべての要素は、アコーディオン内のコンテンツの一部です。アニメーション効果の実装を容易にするために、それらを1つに包みます

真ん中。

<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()関数では、要素がアニメーション化されているかどうかを確認します（閉じるか展開）。要素がアニメーション化されている間にユーザーがアコーディオンをクリックした場合、このチェックを行う必要があります。クリック速度が速すぎる場合、アコーディオンが完全に拡張されて完全に閉じてジャンプすることを望まない。<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()関数は、WAAPIの.animate()関数を使用します。詳細については、MDNドキュメントを読むことができます。 WAAPIはCSS @keyframesに非常に似ています。アニメーションのキーフレームの開始と終了を定義する必要があります。この例では、2つのキーフレームのみが必要です。1つ目は要素の現在の高さで、2つ目はアコーディオンが閉じた後の高さです。現在の高さは、 startHeight変数に保存されます。近い高さは、 endHeight変数に保存され、<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()関数は、アコーディオンを拡張したいときに呼び出されます。現在、この関数はアコーディオンアニメーションを制御していません。最初に、計算します<details></details>要素の高さと、インラインスタイルを使用して要素に適用します。完了したら、 openプロパティを設定してコンテンツを表示することができますが、 overflow: hiddenと固定された高さを設定しているため、コンテンツはまだ隠されています。次に、次のフレームがexpand()関数を呼び出し、要素のアニメーションを作成するのを待ちます。

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

expand()

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

拡大する（） {
  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()

この関数は、アニメーションが崩壊または拡張されたときに呼び出されます。ご覧のとおり、アコーディオンがオンになったときに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>電源を入れたときにパディングを追加します。これにより、アニメーションプロセス中にジャンプが発生する可能性があります。内部コンテンツにも同じことが言えます。固定された高さが必要です。アニメーションの開口部中に高さの変化があるコンテンツを避ける必要があります。

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

要約します

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

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

以上がWAAPIを使用して詳細要素をアニメーション化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。