Чистое затухание JavaScript, а затем загрузка

У меня есть довольно простой фрагмент jQuery, который затемняет элемент, а затем загружает внешнюю страницу PHP через AJAX после нажатия кнопки, и я пытаюсь сделать то же самое с помощью Javascript, поэтому я могу вообще избежать использования jQuery.

jQuery:

$(document).on("click", "#button", function () {
    $("#image").fadeOut(580, function () {
        $("#image-wrapper").load("loader.php");
     });

    return false;
});

Javascript:

document.getElementById("button").addEventListener("click", function () {
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 300) {
            document.getElementById("image").classList.add("fade--out");
            document.getElementById("image-wrapper").innerHTML = xhr.responseText;
            console.info("Success");
        } else {
            console.info('Error');
        }
    };

    xhr.open('GET', 'loader.php');
    xhr.send();
});

И немного CSS:

.fade--out {
    opacity: 0;
}

#image {
    transition: opacity 480ms ease 0s;
}

До сих пор я писал это, но я могу только заставить XMLHttpRequest работать нормально, но я не могу заставить элемент image исчезать перед загрузкой файла PHP. Как я могу заставить image div исчезать, а затем загружать файл PHP внутри imaga-wrapper div?