2

var btn = document.querySelector('button');
btn.addEventListener('click', popup);
function popup() {
  var popwin = document.createElement('div');
  document.body.append(popwin);
  setTimeout(popclose, 2000);
  function popclose() {
  	for (var i=0; i<100; i++); {
	popwin.style.backgroundColor = 'rgba(123, 204, 91,',i/100,');';
	if (i >= 100) {
		popwin.remove();
	};
};
  }
}
div {
  background-color: rgba(123, 204, 91, 0.5);
  width: 200px;
  height: 100px;
}
<button>Кнопка</button>

Имеется такая попытка сделать плавное потухание окна, но по какой-то причине не выходит, что я делаю не так?

1 ответ 1

3

Уменьшать значение через цикл как-то слишком сложно.

Правильнее добавлять в скрипте css-класс, а не стиль к элементу.

Нужно сделать класс, например с opacity: 0, а исчезаемому диву transition.

Сначала добавляете класс, див медленно затухает, потом только удаляете элемент.

Что-то типа этого:

var btn = document.querySelector("button");
btn.addEventListener("click", popup);
function popup() {
  var popwin = document.createElement("div");
  document.body.append(popwin);
  setTimeout(pophide, 1500);
  function pophide() {
    popwin.classList.add("foo");
    setTimeout(popclose, 2500);
  }
  function popclose() {
    popwin.remove();
  }
}
div {
  background-color: rgba(123, 204, 91, 0.5);
  width: 200px;
  height: 100px;
  opacity: 1;
  transition: opacity 1s;
}
.foo {
  opacity: 0;
}
<button>Кнопка</button>

Можно ещё менять высоту, чтобы элементы не скакали.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.