Плавно анимировать появление элемента

91
11 января 2021, 03:20

Вроде бы при подобном коде всё должно изменяться плавно, но подобного, к сожалению, не происходит.

let button = document.createElement('button'); 
button.style.opacity = 0; 
document.body.append(button); 
button.style.opacity = 1;
button { 
  height: 200px; 
  width: 200px; 
  transition: 1s; 
  }

Answer 1

Надо позволить браузеру отрендерить первое состояние чтобы он решил сделать transition во второе

В вашем случае браузер рендерит сразу opacity = 1, т.к. вызовы идут один за одним и по факту "доходит" до рендеринга только последнее состояние установленное в одной цепочке вызовов

Вызов

setTimeout(() => button.style.opacity = 1)

откладывает выполнение opacity = 1 и браузер сначала рендерит opacity = 0 а потом уже понимает что надо бы сделать transition

let button = document.createElement('button'); 
button.style.opacity = 0; 
document.body.append(button); 
setTimeout(() => button.style.opacity = 1)
button { 
  height: 200px; 
  width: 200px; 
  transition: 1s; 
  }

Или необходимо использовать @keyframes

let button = document.createElement('button'); 
document.body.append(button);
button { 
  height: 200px; 
  width: 200px; 
  animation: show 1s forwards; 
} 
 
@keyframes show{ 
  0%   { opacity: 0 } 
  100% { opacity: 1 } 
}

Answer 2

var button = document.createElement('button'); 
button.innerHTML = 'text'; 
document.body.appendChild(button);
button{ 
	background-color: red; 
	transition: 0s; 
} 
button:hover{ 
	background-color: blue; 
	transition: .6s; 
	color: #fff; 
}

P.S я заметил Вы забыли добавить Child к append

READ ALSO
Сделать обновление кнопки
javascript

Сделать обновление кнопки

При нажатии на кнопку фильтр выводится окно сайдбара, где можно выбрать параметры фильтров, задать и отфильтроватьНо при закрытии окна (когда...

 104
Блокирование кнопки в форме
javascript

Блокирование кнопки в форме

нужно сделать так, чтоб кнопка Save блокировалась, если UserName пустойНо не понимаю как это сделать)

 104
Одно ли это и тоже?
javascript

Одно ли это и тоже?

Вот это

 112
Как сделать прилепание правого блока к низу страницы при прокрутке?
CSS

Как сделать прилепание правого блока к низу страницы при прокрутке?

У меня такая структура шаблона:

 128