Пишу всплывающие подсказки на сайте. Столкнулся с такой проблемой: они не плавно появляются. В этом коде я пытался изначально задавать opacity: 0
, а затем, после добавления элемента в разметку, задавать opacity: 1
, но безуспешно. Затухают они плавно.
class ModalWindow {
constructor(title, descr) {
this.title = title;
this.descr = descr;
}
alert() {
const newAlert = document.createElement('div'),
title = document.createElement('h3'),
body = document.createElement('div');
newAlert.classList.add('alert');
body.classList.add('descr');
title.textContent = this.title || 'Новый alert';
body.textContent = this.descr || '';
newAlert.appendChild(title);
if (body.textContent !== '') {
newAlert.appendChild(body);
}
document.body.appendChild(newAlert);
newAlert.style.opacity = 1;
setTimeout(() => {
newAlert.style.opacity = 0;
}, 3000);
}
}
let newAlert = new ModalWindow();
document.querySelector('button').addEventListener('click', newAlert.alert);
.alert {
position: absolute;
left: 2px;
top: 2px;
padding: 10px 20px;
-webkit-box-shadow: 5px 5px 14px -5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 5px 5px 14px -5px rgba(0, 0, 0, 0.75);
box-shadow: 5px 5px 14px -5px rgba(0, 0, 0, 0.75);
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>
</head>
<body>
<button>кнопка</button>
</body>
</html>