Содержание
Добавление удобных уведомлений имеет решающее значение для создания приятного пользовательского опыта на многих сайтах и в приложениях. Одним из популярных типов уведомлений является ”тост” - небольшое всплывающее сообщение, которое появляется на экране, чтобы проинформировать пользователя о каком-либо событии или действии.
В этом уроке я расскажу вам о том, как создать анимированное уведомление с нуля с помощью HTML, CSS и JavaScript.
Что такое тостовое уведомление?
Тостовое уведомление - это ненавязчивый способ предоставления информации пользователям. Он часто используется для уведомления пользователей об успешных действиях, таких как отправка формы или ошибки. Такие уведомления обычно появляются в нижней или верхней части экрана и исчезают через несколько секунд.
Не существует жестких или быстрых правил в отношении шаблонов дизайна тостового пользовательского интерфейса, но главное помнить, что он должен быть неинтрузивным, чтобы конечный пользователь не должен был реагировать немедленно.
Начало работы
Чтобы создать анимированное уведомление о тосте, мы начнем с простой HTML-структуры и CSS-стилей. Мы будем использовать JavaScript для управления его внешним видом и поведением.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Анимированное тостовое уведомление</title
</head>
<body>
<button type="button" id="showToastBtn">Показать тост</button>.
</body>
</html>
Стилизация CSS
Мы будем следовать традиционным шаблонам дизайна и прикрепим уведомление о тосте в правом нижнем углу области просмотра браузера. С помощью CSS мы можем зафиксировать его, чтобы он всегда был на виду, если пользователь прокрутит страницу.
# toast {
положение: фиксированное;
низ: 20px;
справа: 20px;
padding: 10px 20px;
background-color: #28a745;
цвет: #fff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0, 0.2);
переход: opacity 0.3s ease-in-out;
непрозрачность: 0;
}
# toast.show {
непрозрачность: 1;
}
Сделайте наш тост интерактивным с помощью JavaScript
Мы создали класс Toast, который инкапсулирует поведение уведомления о тосте.
Такой объектно-ориентированный подход облегчает управление несколькими тостовыми уведомлениями и позволяет сохранить код организованным и пригодным для повторного использования.
Когда и если нам понадобится еще одно уведомление о тосте, мы создали логику, чтобы легко справиться с этим.
class ToastNotification {
constructor(message) {
this.message = message;
this.toastElement = document.createElement('div');
this.toastElement.id = 'toast';
this.toastElement.innerHTML = `${this.message}`;
document.body.appendChild(this.toastElement);
}
show = () => {
this.toastElement.classList.add('show');
setTimeout(() => {
this.toastElement.classList.remove('show');
}, 3000);
};
}
const myToast = new ToastNotification('This is a toast notification!');
Конструктор constructor в классе Toast инициализирует сообщение и динамически создает элемент тоста, прикрепляя его к телу документа. Обратите внимание, как добавляемый id соотносится с нашим CSS. Конструктор также добавляет слушателя события click к кнопке “Show Toast”, который прослушивает действие и срабатывает при нажатии.
Метод show класса Toast управляет отображением и скрытием уведомления о тосте. Я добавил функцию setTimeout, которая представляет собой предопределенную функцию задержки. Мы передаем секунды в миллисекундах, чтобы настроить, как долго уведомление о тосте должно оставаться видимым.
В некоторых приложениях необходимо показывать уведомление о тосте после загрузки, завершения процесса или возникновения ошибок. Все это можно сделать динамически, а не слушать ввод пользователя.
Возможности для улучшения
Существует множество возможностей для улучшения дизайна и пользовательского опыта. Например, что если на странице будет несколько экземпляров уведомления о тосте? Вероятно, должна быть поддержка многих из них. Для этого нужно расширить класс JavaScript и стилистику CSS, чтобы разместить более одного тоста за раз.
Потенциально можно добавить возможность отклонять уведомления о тостах. Я бы рекомендовал оставить время появления тостов на экране в нижнем диапазоне, но учитывать время, которое может потребоваться конечному пользователю, чтобы прочитать уведомление.
На этом пока все, надеюсь, вам понравился этот урок!