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

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

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

.image img {
  opacity: 0;
  transition: opacity .5s;
}

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

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

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, прозрачность должна плавно измениться, правда?

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

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

$div.appendChild($image);
setTimeout(function() {
  $image.classList.add('fade-in');
}, 0);

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

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