---
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** 操作可在不依赖条件可见性的情况下显示或隐藏元素。

- **触发器**（trigger）决定元素出现或消失的时机——可以是按钮点击，也可以是页面切换。
- **延迟**（delay）设置决定触发器触发后到动作生效之间的时间间隔。
- **动画**（animation）设置决定视觉效果（默认为：淡入 / 淡出）。

:::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** 面板中，[添加触发器](onboarding-actions#set-up-interactions)，选择 **Show element** 或 **Hide element** 动作。
3. 在 **Elements** 下拉菜单中，选择要显示或隐藏的元素。
4. 逐一选中步骤 3 中的每个元素，打开 **Design** 面板。如果该动作是显示元素，将 **Visibility** 设置为 **Hide**；如果是隐藏元素，将 **Visibility** 设置为 **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）。例如，要在屏幕打开三秒后显示关闭按钮，可使用 **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 |

**编辑操作**窗口会循环预览动画效果。用户只有在元素完全出现后才能点击，因此按钮的**Duration**应尽量设置得短一些。

如果一个操作同时作用于多个元素，这些元素会同时播放动画。若想让元素依次播放动画，可为每个元素单独添加一个操作，并为后续元素设置逐渐递增的**Delay**值。

## 动画与延迟不生效的情况 \{#when-animation-and-delay-dont-apply\}

以下三种情况下，**Animation** 和 **Delay** 不会生效：

- **设置了[条件可见性](onboarding-element-visibility)的元素**：以该元素为目标的操作会立即显示或隐藏它。如需应用动画或延迟，请移除条件：将 **Visibility** 设为 **Show** 或 **Hide**。
- **可复用组件**：组件内部的元素，或组件内操作的任意目标，都会立即出现或消失。
- **[底部弹窗](builder-containers#bottom-sheet)**：底部弹窗会以其自身的动效打开和关闭，不受延迟设置影响。

在这三种情况下，**Edit action** 窗口仍会显示 **Animation** 和 **Delay**，并且在发布时不会出现任何警告。