Show element アクションと Hide element アクションを使用すると、条件付き表示を使わずに要素を表示・非表示にできます。

• トリガーは、ボタンのクリックや画面の切り替えなど、要素の表示・非表示を引き起こすきっかけを決めます。
• 遅延設定は、トリガーが発生してからアクションが実行されるまでの時間を決めます。
• アニメーション設定は、視覚的なエフェクトを決めます（デフォルト：フェードイン / アウト）。

要素の表示・非表示

デフォルトでは、画面上のすべての要素はスクリーンが開くと同時に表示され、ユーザーが画面を離れるまで表示され続けます。Show element および Hide element アクションを使うと、要素がいつどのように表示・非表示になるかを制御できます。たとえば、次のようなことが可能です。

• スクリーンが開いて数秒後に閉じるボタンを表示する。
• 見出しを一度に表示するのではなく、フェードインで表示する。
• ユーザーが閉じるアイコンをタップしたときにヒントを非表示にする。

トリガー

各トリガーは異なるタイミングで発火します：

タイミング	トリガー	追加先
画面が開いたとき	On Screen Appear	画面上の任意の要素（アクションが表示する要素も含む）
ユーザーがタップしたとき	On Tap	ボタンなど、ユーザーがタップする任意の表示要素
動画が終了したとき	On Playback Finished	動画
カウントダウンタイマーが終了したとき	On Timer End	タイマー。Visibility を Show に設定することでトリガーが発火する
ユーザーが入力フィールドを変更または送信したとき	On Changed または On Submit	入力フィールド

セットアップ

すべてのトリガーで手順は共通です：

1. ボタンなど、その時点でテーブルが一覧表示する対象を選択します。
2. Interactions パネルで、Show element または Hide element アクションを使ってトリガーを追加します。
3. Elements ドロップダウンで、表示または非表示にする対象を選択します。
4. ステップ3で選択した各要素を選び、Design パネルを開きます。アクションで表示する場合は Visibility を Hide に設定し、非表示にする場合は Show に設定します。複数のアクションが同じ要素を変更する場合は、最初に実行されるアクションに合わせてこのルールを適用してください。Show element アクションは、すでに表示されている要素には効果がありません。非表示の要素を後で編集するには、Layers パネルで選択してください（キャンバスには表示されません）。
5. 結果を確認するには、デバイスでフローをテストしてください。キャンバスではアクションは実行されません。デバイス上では、非表示の要素はスペースを占有しないため、要素が表示・非表示になる際に周囲のコンテンツが移動します。

Show element または Hide element アクションを設定するには、上記の手順に従ってください。その後、以下の設定を変更します：

• Delay — 画面が開いてから数秒後に要素を表示する
• Animation — 要素の表示・非表示をアニメーションで演出する

画面が開いてから数秒後に要素を表示する

Delay フィールドは、トリガーが発火してからアクションが待機する時間（最大5000 ms）を設定します。たとえば、画面が開いてから3秒後に閉じるボタンを表示するには、On Screen Appear トリガーを使用し、Delay を3000 msに設定します。整数秒単位で指定してください。iOS では、遅延は整数秒に切り上げられます。

遅延を確認するには、デバイスでフローをテストしてください。Edit action ウィンドウではプレビューできません。

5秒以上の遅延を設定する場合は、カウントダウンタイマーが終了したときに要素を表示するを参照してください。

要素の表示・非表示時にアニメーションを設定する

Edit action ウィンドウには、以下のアニメーション設定があります。

設定	変更される内容
Animation	要素の表示・非表示の方法：None、Fade in または Fade out、Rise、Pop
Easing	アニメーション中の速度変化の方法：Linear、Ease in、Ease out、Ease in-out
Duration	アニメーションの長さ（最大5000 ms）
Distance	Rise の場合：要素の移動距離（1〜200 px）
Start scale	Pop の場合：要素の最小サイズ（フルサイズの0.1〜0.99）

Edit action ウィンドウでは、アニメーションのプレビューがループ再生されます。ユーザーが要素をタップできるのは、その要素が完全に表示された後のみです。そのため、ボタンには Duration を短く設定してください。

複数の要素を対象とするアクションは、それらを同時にアニメーションさせます。順番にアニメーションさせたい場合は、要素ごとにアクションを追加し、それぞれに前の要素より長い Delay を設定してください。

アニメーションと遅延が適用されない場合

次の3つのケースでは、Animation と Delay は効果がありません：

• 条件付き表示が設定された要素：その要素を対象とするアクションは、即座に表示・非表示を切り替えます。アニメーションや遅延を適用するには、条件を削除して Visibility を Show または Hide に設定してください。
• 再利用可能なコンポーネント：コンポーネント内の要素、またはコンポーネント内のアクションが対象とする要素は、即座に表示・非表示が切り替わります。
• ボトムシート：シートは独自のモーションで開閉し、遅延はありません。

3つのケースすべてで、Edit action ウィンドウには引き続き Animation と Delay が表示され、公開時に警告は表示されません。