2月27日〜3月4日の学習内容

アコーディオン（アニメーションあり・なし）

アニメーションなしのアコーディオンであれば<details><summary>を用いればhtmlとcssのみで作成が可能。

【例：html】

<details class="accordion">
   <summary class="accordion-header">Q. クレジットカードで支払えますか？</summary>
      <div class="accordion-content">
        <p class="accordion-text">ここにアコーディオン内の文章を書く</p>
      </div>
</details>

<details><summary>に標準搭載されている黒矢印以外でアコーディオンの開閉の状態を現したい場合、cssファイル内で削除の指示を出さなければならない

【css】

/* Chrome、Safari */
summary::-webkit-details-marker {
    display: none;
}

/* Chrome、Safari以外 */
summary {
    display: block;
}

Javascriptでアニメーションをつける際、コンテンツの高さを変化（コンテンツを出現させる時：0→コンテンツの高さ、非表示にするとき：コンテンツの高さ→0）させなければならない。この時の高さの指定は

【例：js】

height: content(任意の名前).offsetHeight + "px",　　　/*  +"px"がないとうまく機能しない */

アニメーションを通常のjsで動かす場合、アコーディオンを連打した場合に不具合が生じるためアニメーション実行中にクリックを受け付けないための措置を取る必要がある。アニメーションが終了した後にこの実行属性を取り除くことでクリック時に閉じたり開いたりすることができるようになる。

【例：js】

const isRunning = "running";  // アニメーション実行中に付与するカスタムデータ属性

// アニメーション中にクリックを受け付けないための措置
if (element.dataset.animStatus === isRunning) return; 

// アニメーション実行中の値を取り除く
element.dataset.animStatus = "";

GSAPアニメーション

これまでに作成したドロップメニュー、モーダル、ハンバーガーメニュー、タブメニュー、アコーディオンの動きをGSAPを使用して再現。

GSAPを使用するためにはhtmlファイル内で読み込みが必要となる。

【html】

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" defer></script>

バージョンの更新もあると思うので確認は必要か。→ GSAP公式

こちらのほうが感覚的にアニメーションを書ける印象。