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).

Hiển thị hoặc ẩn một phần tử

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

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 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

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 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ị. 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 — hiển thị một phần tử sau vài giây kể từ khi màn hình mở
• Animation — 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ở

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ị: 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.

Tạo hiệu ứng động khi phần tử xuất hiện hoặc biến mất

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

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: 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: 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.