---
title: "要素をオンデマンド、遅延、またはアニメーション付きで表示・非表示にする"
description: "画面が開いたとき、ユーザーがタップしたとき、または他のトリガーが発火したときにフロー要素を表示・非表示にします。変更を遅延させたり、フェード、上昇、ポップのアニメーションを適用したりできます。"
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skills: `npx adapty skills install --yes`

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

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

:::note
画面間のトランジションには[専用のアニメーション](flow-screen-transitions)があります。スプラッシュ画面やローディング画面からタップなしでユーザーを移動させるには、[**Navigate to Screen** アクションに遅延を設定](flow-screen-transitions#move-users-to-another-screen-automatically)してください。
:::

## 要素の表示・非表示 \{#show-or-hide-an-element\}

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

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

### トリガー \{#triggers\}

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

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

### セットアップ \{#setup\}

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

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

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

- [**Delay**](#show-an-element-a-few-seconds-after-the-screen-opens) — 画面が開いてから数秒後に要素を表示する
- [**Animation**](#animate-an-element-as-it-appears-or-disappears) — 要素の表示・非表示をアニメーションで演出する

## 画面が開いてから数秒後に要素を表示する \{#show-an-element-a-few-seconds-after-the-screen-opens\}

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

遅延を確認するには、[デバイスでフローをテストしてください](paywall-device-compatibility-preview#preview-on-devices)。**Edit action** ウィンドウではプレビューできません。

5秒以上の遅延を設定する場合は、[カウントダウンタイマーが終了したときに要素を表示する](flow-timer#delay-when-a-close-button-appears)を参照してください。

## 要素の表示・非表示時にアニメーションを設定する \{#animate-an-element-as-it-appears-or-disappears\}

**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** を設定してください。

## アニメーションと遅延が適用されない場合 \{#when-animation-and-delay-dont-apply\}

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

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

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