---
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**, чтобы показывать или скрывать элемент без использования условной видимости.

- **Триггер** определяет, что вызывает появление или исчезновение элемента — нажатие кнопки или смена экрана.
- **Задержка** определяет промежуток времени между триггером и применением действия.
- **Анимация** определяет визуальный эффект (по умолчанию: Fade in / out).

:::note
Переходы между экранами имеют [собственные анимации](flow-screen-transitions). Чтобы переводить пользователей со splash-экрана или экрана загрузки без нажатия, [добавьте задержку к действию **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**; если скрывает — в значение **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 мс). Например, чтобы показать кнопку закрытия через три секунды после открытия экрана, используйте триггер **On Screen Appear** и установите **Delay** в 3000 мс. Указывайте целые секунды: на 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 мс |
| **Distance** | Для **Rise**: на сколько пикселей перемещается элемент, 1–200 px |
| **Start scale** | Для **Pop**: минимальный размер элемента, 0.1–0.99 от его полного размера |

Окно **Edit action** воспроизводит превью анимации в цикле. Пользователь может нажать на элемент только после того, как он полностью появился, поэтому для кнопки рекомендуется задавать небольшую **Duration**.

Если действие затрагивает несколько элементов, они анимируются одновременно. Чтобы элементы появлялись один за другим, добавьте отдельное действие для каждого элемента, увеличивая значение **Delay** для каждого следующего.

## Когда анимация и задержка не работают \{#when-animation-and-delay-dont-apply\}

В трёх случаях **Animation** и **Delay** не имеют эффекта:

- **Элемент с [условной видимостью](onboarding-element-visibility)**: действия, нацеленные на этот элемент, показывают или скрывают его мгновенно. Чтобы добавить анимацию или задержку, уберите условие: установите **Visibility** в значение **Show** или **Hide**.
- **Переиспользуемый компонент**: элемент внутри компонента или любой объект действия внутри него появляется и исчезает мгновенно.
- **[Нижний лист](builder-containers#bottom-sheet)**: шторка открывается и закрывается с собственной анимацией, без задержки.

Во всех трёх случаях окно **Edit action** по-прежнему показывает **Animation** и **Delay**, и при публикации предупреждение не появляется.