クリックすると要素を表示または非表示にする

このチュートリアルの内容:

1. 要素を表示するアニメーションを構築する
2. 要素を消すアニメーションを開発する
3. 追加のトリガー要素を統合して、クリック時に表示/非表示の両方を設定する

要素を紹介するアニメーションを作成する

1. イニシエーターとして機能させたい要素を選択します（例：「表示」ボタン）
2. インタラクションパネルで、選択した要素のドロップダウンからマウスクリック（タップ）を選択します。
3. 1回目のクリックでアニメーションを開始するを選択します
4. 時間指定アクションの横にある追加シンボルをタップします
5. アニメーションに「Reveal」という名前を付けます
6. 表示したい要素を選択します（イニシエーターとは別）
7. 時間指定アクションの横にある追加記号をタップし、非表示/表示を選択します。
8. 目のアイコンをタップしてディスプレイをなしに設定します
9. 「初期状態として設定」の横にあるチェックボックスをオンにします
10. インタラクションパネルが表示されている間に、追加シンボルをクリックして、時間指定アクションの下に2番目の非表示/表示アクションを導入します。
11. 非表示/表示セクションで、表示設定を元の値（このシナリオではブロック）に戻します。

要素を消すアニメーションを構築する

1. 前のステップと同じ開始要素を選択します
2. 2回目のクリックでアニメーションを開始するを選択します
3. 時間指定アクションの横にある追加シンボルをタップします
4. アニメーションに「Conceal」という名前を付けます
5. 前のステップで削除したい同一の要素を選択します
6. 時間指定アクションの横にある追加記号をタップし、非表示/表示を選択します。
7. 目のアイコンをタップしてディスプレイをなしに設定します

別のトリガー要素を統合し、クリック時に表示/非表示の両方を設定します。

1. 元の開始要素（「歌詞を表示」テキスト）を複製します。
2. 名前を変更する（例：「歌詞を隠す」）
3. アクションを確立し、その初期状態表示をなしに調整します
4. 2 番目のアクションを組み込み、表示を元の値に設定します (例: ブロック)
5. 「歌詞を表示」を選択し、クリックすると歌詞が非表示になるように表示設定を「なし」にします。
6. 「歌詞を隠す」をクリックし、表示を非表示にするアニメーションを追加します
7. 「歌詞を表示」に戻り、アニメーションを追加して、2回目のクリックで再び表示されるようにします。
8. クリックして、すべての時間指定アクションが同時に実行されるように配置します (0 秒)

‍

‍

FAQ などのコンテンツを徐々に表示するアコーディオンの開発に興味がありますか? カスタム アコーディオンを作成するプロセスを調べてみましょう。