Я тут кое-что написал. Извините, если это недостаточно осмысленно или избыточно — надеюсь, меня поправят.
<!DOCTYPE html>
<html>
<head>
<style>
.block {
transition-property:height;
width: 100%;
background-color: #aaff00;
overflow-y: hidden;
height: 0;
position:fixed;
bottom:0;
transition-duration:0.5s
}
.visible {
height: 100px;
}
</style>
</head>
<body>
<button onclick='show()'>click me!</button>
<div class='block'>Сообщение успешно отправлено.</div>
<script>
const block = document.querySelector(".block");
let visibility = false;
function show() {
if (!visibility) {
block.classList.add("visible");
//visibility = true;
const command = new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 2000);
});
command.then(function () {
block.classList.remove("visible");
visibility = false;
});
}
}
</script>
</body>
</html>
Если раскомментировать 29 строчку, то блок временно перестанет реагировать на нажатия кнопки...