---
title: "Hiển thị và ẩn các phần tử theo yêu cầu, có thể với độ trễ hoặc hiệu ứng động"
description: "Hiển thị hoặc ẩn một phần tử trong flow khi màn hình mở, người dùng nhấn, hoặc một trigger khác kích hoạt. Trì hoãn thay đổi, hoặc làm phần tử mờ dần, trượt lên, hoặc bật ra."
---

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

Dùng action **Show element** và **Hide element** để hiện hoặc ẩn một phần tử mà không cần dùng conditional visibility.

- **Trigger** (Điều kiện kích hoạt) xác định điều gì khiến phần tử xuất hiện hoặc biến mất — một lần nhấn nút hoặc thay đổi màn hình.
- **Delay** (Độ trễ) xác định khoảng thời gian giữa trigger và khi hành động có hiệu lực.
- **Animation** (Hiệu ứng) xác định hiệu ứng hình ảnh (mặc định: Fade in / out).

:::note
Chuyển tiếp giữa các màn hình có [hiệu ứng riêng](flow-screen-transitions). Để chuyển người dùng khỏi màn hình splash hoặc loading mà không cần nhấn, hãy [đặt độ trễ cho hành động **Navigate to Screen**](flow-screen-transitions#move-users-to-another-screen-automatically).
:::

## Hiển thị hoặc ẩn một phần tử \{#show-or-hide-an-element\}

Theo mặc định, mọi phần tử trên màn hình đều xuất hiện khi màn hình mở và hiển thị cho đến khi người dùng rời đi. Với các hành động **Show element** và **Hide element**, bạn có thể kiểm soát thời điểm và cách một phần tử xuất hiện hoặc biến mất. Ví dụ, bạn có thể:

- Hiển thị nút đóng sau vài giây kể từ khi màn hình mở.
- Làm tiêu đề mờ dần xuất hiện thay vì hiện ngay lập tức.
- Ẩn một gợi ý khi người dùng nhấn vào biểu tượng đóng của nó.

### Trình kích hoạt \{#triggers\}

Mỗi trình kích hoạt sẽ kích hoạt vào một thời điểm khác nhau:

| Thời điểm | Trình kích hoạt | Thêm vào |
|---|---|---|
| Màn hình mở ra | **On Screen Appear** | Bất kỳ phần tử nào trên màn hình, kể cả phần tử mà hành động hiển thị |
| Người dùng nhấn | **On Tap** | Bất kỳ phần tử hiển thị nào mà người dùng nhấn, chẳng hạn như nút |
| Video kết thúc | **On Playback Finished** | Video |
| [Đồng hồ đếm ngược](flow-timer) kết thúc | **On Timer End** | Đồng hồ hẹn giờ, với **Visibility** được đặt thành **Show** để trình kích hoạt có thể kích hoạt |
| Người dùng thay đổi hoặc gửi một trường nhập liệu | **On Changed** hoặc **On Submit** | Trường nhập liệu |

### Thiết lập \{#setup\}

Các bước thực hiện giống nhau cho mọi trigger:

1. Chọn thành phần mà bảng liệt kê cho thời điểm bạn cần, chẳng hạn như một nút.
2. Trong bảng **Interactions**, [thêm trigger](onboarding-actions#set-up-interactions) với hành động **Show element** hoặc **Hide element**.
3. Trong dropdown **Elements**, chọn thành phần cần hiển thị hoặc ẩn đi.
4. Chọn từng thành phần ở bước 3 và mở bảng **Design**. Nếu hành động hiển thị thành phần đó, đặt **Visibility** thành **Hide**; nếu hành động ẩn thành phần đó, đặt **Visibility** thành **Show**. Nếu có nhiều hành động thay đổi thành phần, hãy áp dụng quy tắc này cho hành động chạy đầu tiên. Hành động **Show element** không có tác dụng gì với những thành phần đã hiển thị sẵn. Để chỉnh sửa thành phần đang ẩn sau này, hãy chọn nó trong bảng **Layers**: canvas sẽ không hiển thị thành phần đó.
5. Để xem kết quả, [thử flow trên thiết bị](paywall-device-compatibility-preview#preview-on-devices). Canvas không chạy các hành động. Trên thiết bị, thành phần đang ẩn không chiếm không gian, vì vậy nội dung xung quanh sẽ dịch chuyển khi nó xuất hiện và sau khi nó biến mất.

Làm theo các bước trên để thiết lập hành động **Show element** hoặc **Hide element**. Sau đó, thay đổi cài đặt của nó:

- [**Delay**](#show-an-element-a-few-seconds-after-the-screen-opens) — hiển thị một phần tử sau vài giây kể từ khi màn hình mở
- [**Animation**](#animate-an-element-as-it-appears-or-disappears) — thêm hiệu ứng động cho phần tử khi nó xuất hiện hoặc biến mất

## Hiển thị một phần tử sau vài giây kể từ khi màn hình mở \{#show-an-element-a-few-seconds-after-the-screen-opens\}

Trường **Delay** xác định thời gian action chờ sau khi trigger kích hoạt (tối đa 5000 ms). Ví dụ: để hiển thị nút đóng sau ba giây kể từ khi màn hình mở, hãy dùng trigger **On Screen Appear** và đặt **Delay** thành 3000 ms. Nên dùng số giây chẵn: trên iOS, thời gian delay sẽ được làm tròn lên đến giây gần nhất.

Để xem độ trễ, [kiểm tra flow trên thiết bị](paywall-device-compatibility-preview#preview-on-devices): cửa sổ **Edit action** không xem trước được tính năng này.

Nếu muốn độ trễ dài hơn 5 giây, hãy [hiển thị phần tử khi Countdown timer kết thúc](flow-timer#delay-when-a-close-button-appears).

## Tạo hiệu ứng động khi phần tử xuất hiện hoặc biến mất \{#animate-an-element-as-it-appears-or-disappears\}

Cửa sổ **Edit action** có các cài đặt hiệu ứng động sau:

| Cài đặt | Thay đổi gì |
|---|---|
| **Animation** | Cách phần tử xuất hiện hoặc biến mất: **None**, **Fade in** hoặc **Fade out**, **Rise**, hoặc **Pop** |
| **Easing** | Cách tốc độ thay đổi trong quá trình animation: **Linear**, **Ease in**, **Ease out**, hoặc **Ease in-out** |
| **Duration** | Thời gian animation kéo dài, tối đa 5000 ms |
| **Distance** | Với **Rise**: khoảng cách phần tử di chuyển, từ 1–200 px |
| **Start scale** | Với **Pop**: kích thước nhỏ nhất của phần tử, từ 0.1–0.99 so với kích thước đầy đủ |

Cửa sổ **Edit action** phát lặp lại bản xem trước animation. Người dùng chỉ có thể nhấn vào một phần tử sau khi nó xuất hiện hoàn toàn, vì vậy hãy giữ **Duration** ngắn cho nút bấm.

Một action nhắm vào nhiều phần tử sẽ animate chúng cùng lúc. Để animate từng phần tử lần lượt, hãy thêm một action cho mỗi phần tử, mỗi action có **Delay** dài hơn action trước.

## Khi nào Animation và Delay không có tác dụng \{#when-animation-and-delay-dont-apply\}

Có ba trường hợp **Animation** và **Delay** không có hiệu lực:

- **Một phần tử có [hiển thị có điều kiện](onboarding-element-visibility)**: Các hành động nhắm vào phần tử đó sẽ hiện hoặc ẩn nó ngay lập tức. Để thêm animation hoặc delay, hãy xóa điều kiện: đặt **Visibility** thành **Show** hoặc **Hide**.
- **Một component tái sử dụng**: Phần tử bên trong component, hoặc bất kỳ đích nào của một hành động bên trong component đó, sẽ xuất hiện hoặc biến mất ngay lập tức.
- **Một [bottom sheet](builder-containers#bottom-sheet)**: Sheet mở và đóng bằng chuyển động riêng của nó, không có delay.

Trong cả ba trường hợp, cửa sổ **Edit action** vẫn hiển thị **Animation** và **Delay**, và bạn sẽ không thấy cảnh báo nào khi xuất bản.