accordions-dropdowns

アコーディオンとドロップダウンのアニメーション原則

ディズニーの12の原則を展開／折りたたみ要素に適用し、滑らかで分かりやすい表示を実現します。

アコーディオンに適用する原則

1. 圧縮と伸長

折りたたむときにコンテンツをわずかに縮め、展開するときに伸ばします。クリック時のフィードバックとして、トリガーのヘッダーを軽く圧縮できます。

2. 予備動作

展開する前に、ヘッダーを一瞬押し下げます。コンテンツが表示される前に、シェブロンの回転を開始します。これにより期待感が生まれます。

3. 演出

展開したセクションがはっきり見えるようにします。他のアコーディオン項目を暗くすることも検討してください。アクティブなヘッダーはハイライト表示を維持します。

4. ストレート・アヘッドとポーズ・トゥ・ポーズ

折りたたみ、展開中、展開、折りたたみ中という明確な状態を定義します。制御しやすく、可逆的なアニメーションにはポーズ・トゥ・ポーズを使います。

5. 後追いと重なり合う動作

まずコンテナを展開し、その50〜100ms後にコンテンツをフェードインさせます。シェブロンの回転は行き過ぎてから戻る動きにできます。これにより奥行きが生まれます。

6. スローインとスローアウト

展開：ease-out（開始は速く、終わりは滑らか）。折りたたみ：ease-in（開始は遅く、終わりは速く）。cubic-bezier(0.4, 0, 0.2, 1) が適しています。

7. 弧を描く動き

シェブロンの回転は、弧を通るように滑らかに変化させます。コンテンツ項目は真下ではなく、わずかな弧を描いて表示できます。

8. 二次動作

コンテンツの表示（主動作）と同時にシェブロンを回転させ（二次動作）、隣接するアコーディオンを折りたたむこともできます（三次動作）。

9. タイミング

• 展開／折りたたみ：250〜350ms
• シェブロンの回転：200〜250ms
• コンテンツのフェード：150〜200ms
• 内部項目のスタガー：30〜50ms
• クリック時のフィードバック：50ms

10. 誇張

重要な表示には、よりドラマチックなタイミングを使えます。FAQのアコーディオンには、よりきびきびしたアニメーションを使えます。コンテンツの重要度に合わせてください。

11. 立体感のある描画

ヘッダーの高さを一定に保ちます。高さのアニメーション中にコンテンツが揺れないようにします。適切な高さの制御方法を使います。

12. 魅力

滑らかなアコーディオンは洗練された印象になります。ぎこちない高さのアニメーションは不具合のように感じられます。適切な展開／折りたたみの実装には、技術的な投資をする価値があります。

CSS の実装

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease-out;
}

.accordion-content.open {
  grid-template-rows: 1fr;
}

.accordion-inner {
  overflow: hidden;
}

.accordion-chevron {
  transition: transform 250ms ease-out;
}

.accordion-header[aria-expanded="true"] .accordion-chevron {
  transform: rotate(180deg);
}

/* Alternative: animate max-height */
.dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease-out;
}

.dropdown-content.open {
  max-height: 500px; /* larger than content */
}

主なプロパティ

• grid-template-rows：高さを滑らかに変化させます
• max-height：より簡単ですが、精度は劣ります
• transform：シェブロンを回転させます
• opacity：コンテンツをフェードさせます
• overflow：トランジション中に非表示にします