Взаимодействия: действие в ответ на событие

Взаимодействия

1. 1Продвинутый режим
2. 2Выделите элемент
3. 3Взаимодействия

Пример: кнопка прокручивает к форме

1. В продвинутом режиме выберите кнопку на странице. В панели свойств раскройте «Взаимодействия».
2. Нажмите «Добавить взаимодействие». В поле «Событие» выберите «клик», а в поле «Действие» — «прокрутить к цели».
3. В поле «Цель» выберите «слой». В появившемся списке «Выберите слой…» укажите контейнер формы или другой нужный элемент.
4. Для мгновенной прокрутки оставьте «без анимации». При другом значении этого поля прокрутка будет плавной.
5. Переключите «Предпросмотр на холсте» в состояние «Включён» и нажмите кнопку на холсте. Страница должна прокрутиться к выбранному слою.
6. После проверки выключите предпросмотр на холсте, чтобы вернуться к обычному редактированию.

Как выбрать цель и действие

• «этот элемент» — действие применяется к элементу, на котором задано событие. «слой» — к элементу из списка. «CSS-селектор» — к первому совпавшему элементу, например #notice.
• «ближайшая форма» ищет форму, внутри которой находится исходный элемент. Если кнопка стоит вне формы, такой цели у неё нет. «страница» означает весь документ.
• «показать», «скрыть» и «переключить» управляют видимостью цели. Для них доступны «проявление», «выезд вверх», «выезд вниз» и «масштаб»; длительность и задержка задаются в миллисекундах.
• «открыть ссылку» требует адрес, например /contacts или https://example.com. Переход по этому действию отключён в предпросмотре на холсте: проверяйте его на опубликованной странице.
• «переключить класс» требует имя CSS-класса; «задать состояние» задаёт имя состояния. Чтобы они меняли внешний вид, на странице уже должны быть соответствующие стили или логика.
• «задать стиль» принимает CSS-свойство и значение, например opacity и 0.5. «очистить форму» возвращает поля формы к исходным значениям.

Другие события и проверка

Кроме клика доступны наведение и уход курсора, фокус и его потеря, отправка формы или ошибка, появление элемента в кадре, прокрутка, загрузка страницы, Esc и клик мимо. Для сообщения об успехе нужен результат отправки формы, а не клик по кнопке отправки.

«один раз» ограничивает повторный запуск сценария. Крестик в карточке удаляет это взаимодействие. Если сценарий не срабатывает, проверьте выбранную цель и включён ли предпросмотр на холсте.

Для обычного изменения цвета при наведении достаточно раздела «Наведение». Для простой ссылки — раздела «Ссылка». Взаимодействие полезно, когда нужно связать событие с отдельной целью или дополнительным действием.