アコーディオンドロップインジケーターを生成する

このチュートリアルでは、アコーディオンや折りたたみ可能なパネルに組み込むことができるインタラクティブなドロップ インジケーターを作成するための知識を習得します。

入会前

• パーソナライズされたアコーディオンを形成するプロセスを把握する
• さらに、カスタマイズされたドロップダウンメニューを開発するためのテクニックを確認します。

この指導セッションでは

1. インジケーターを統合してカスタマイズする
2. アニメーションを作成する
3. 影響を受けるcategoryを指定する

インジケーターを統合してカスタマイズする

この手順は簡単です。任意の要素を使用できます。この例では、画像を使用します。画像は下向きのインジケーターを表します。アコーディオン ボタン内の、ナビゲーション内の対応するクエリのすぐ下 (H3) に配置します。次に、カテゴリ (インタラクションに必要) を設定します。必要に応じてサイズを調整します。これは、推定によって実行できます (Shift キーを押しながら上下の矢印を使用して 10 ずつ調整します)。

次に、同じ要素 (インジケーター) を複製し、アコーディオン内の他の見出しの後に配置します。同じクラスを共有しているため、1 つのスタイルを変更すると、必然的にすべてに影響します。

アニメーションを作成する

これが最初の段階です。アニメーションの作成に取り掛かりましょう。インタラクションを開始するトリガーは、アコーディオンのアイテム トリガーです。これを選択したら、アクションを組み込むことで既存のトリガーを強化します。トリガーはマウスのクリック (またはタップ) で動作し、最初のクリックと 2 番目のクリックの 2 つの状態があります。最初のクリックで、オープニング アニメーションの導入に進みます。インジケーターは現在下向きになっているため、1 つのアクションで十分です (コンテンツのアニメーションと同時に)。180 度の回転を実装して、上向きに変換します。

残りのアニメーションとの一貫性を保つために、イージングを調整し（イージング アニメーション カーブを指定）、継続時間を短縮します（より低い値を設定）。

シーケンスをプレビューすると、シームレスに機能するはずです。このフェーズを終了し、終了アニメーションの逆を実装します。既存のアクションと組み合わせて追加のステップを導入します。回転をゼロに設定して、インジケーターを最初の位置に戻します。イージングを調整し (もう一度イージングを選択)、期間を短くします。

プレビューすると、最初のクエリがスライドアウトし、インジケーターが適切に回転していることがわかります。これは期待どおりです。ただし、後続のクエリでは同じ動作は行われません。

影響を受けるクラスを指定する

影響を受けるクラスの指定に進みます。このプロセスは簡単です。このアニメーションはアコーディオン項目のトリガーに関係するため、最初のクリックと 2 番目のクリックではトリガーの子のみが影響を受けるはずです (インジケーターの位置がトリガーの子であることを考慮)。

最初のクリックを処理する際に、インジケータに関するアクションを選択します。それが影響を与えることを確認してください 選択されたエンティティではないではなく、クラスです。この変更がトリガーの子に適用されるように指定します。

完了したら、2 回目のクリックのプロセスを複製します。ダウン インジケーターをターゲットにして、クラス (具体的にはダウン インジケーター クラス) が影響を受けていることを確認します。インジケーターは各トリガーの一部として機能するため、影響を受けるエンティティとしてトリガーの子を選択します。

これらの手順に従うと、下降インジケーターを上昇インジケーターにアニメーション化できます。