Как сделать Css Transition только что добавленному элементу

Понадобилось сделать плавный переход от одной картинки к другой, средствами javascript, как он есть. То есть, ни тебе jQuery.animate ни ещё чего-нибудь.

Сразу подумалось: “Есть же css-transition, круто!” Быстренько накидал стиль:

main.css
1
2
3
4
5
6
7
8
.image img {
  opacity: 0;
  transition: opacity .5s;
}

.image img.fade-in {
  opacity: 1;
}

потом, в скрипте

script.js
1
2
3
4
5
6
var $div = document.querySelector('.image');
var $image = document.createElement('img');
$image.src = 'https://placekitten.com/400/300';

$div.appendChild($image);
$image.classList.add('fade-in');

Казалось бы, мы добавили img на страницу, потом добавили класс fade-in, прозрачность должна плавно измениться, правда?

Нет, к сожалению, не правда.

Чтобы прозрачность всё-таки начала изменяться, необходимо (и, вроде бы, достаточно) сделать так:

script-with-timeout.js
1
2
3
4
$div.appendChild($image);
setTimeout(function() {
  $image.classList.add('fade-in');
}, 0);

За время между срабатыванием основного кода и запуском анонимной функции броузер успевает принять картинку, как добавленную и уже после этого добавление класса приводит к изменению прозрачности.

Тестовая страничка на codepen.

Comments