JavaScript, плавное затухание без JQuery

Хочу сделать лайтбокс для просмотра фотографий без jquery. Кликаю по миниатюре - затемняется основной контент, появляется полноразмерное фото на темном фоне. Хочу что бы он ПЛАВНО появлялся и исчезал. С плавностью проблемы.
Выбрал такой путь - обертка лайтбокса размером с вьюпорт по умолчанию выключена (display: none) и имеет opacity: 0. При нажатии на триггер я сначала добавляю к обертке display: block, затем добавляю класс .visible { transition-duration: 1s; opacity: 1} При нажатии триггера на закрытие применяю следующий действия к обертке:

1. убираю класс .visible;
2. добавляю класс .invisible {opacity: 0; transition-duration: 1s}
3. исполняю задержку 1с (такое ощущение что во время задержки браузер не перерисовывает элементы);
4. Ставлю display: none;

Все по отдельность работает. Все вместе, работает но затухание нет. JS:

function sleep(millis) {
    var t = (new Date()).getTime();
    var i = 0;
    while (((new Date()).getTime() - t) < millis) {
        i++;
    }
}
function pictureClick() {
   var overlay = document.querySelector('.overlay-container');
   var pic = document.querySelector('.overlay-container>.overlay>img.mainView');
   pic.src = this.src;
   overlay.style.display = 'block';
   overlay.classList.remove('invisible');
   overlay.classList.add('visible');
}
function closeClick() {
   var overlay = document.querySelector('.overlay-container');
   overlay.classList.remove('visible');
   overlay.classList.add('invisible');
   sleep(1000);
   overlay.style.display = 'none';
}
window.onload = function() {
   var elems = document.querySelectorAll('.photoCont>div>img');
   var len = elems.length;
   for (var i=0; i<len; i++)  {
      elems[i].addEventListener('click', pictureClick);
   }
   var elems = document.querySelector('#close');
   elems.addEventListener('click', closeClick);
}
Помогите пожалуйста разобраться. Спасибо!