Ajax加载点击的链接并淡出内容？

Question

我有一个站点，在加载时，身体的不透明度会发生变化，从而产生淡入效果。

但是，当单击指向网站另一页面的链接时，我希望内容“淡出”，同时加载新内容并淡出而不刷新页面。我该如何实现？以下是朝正确方向迈出的一步吗？

谢谢！

HTML

<ul class="menu">
    <li class="selected"><a href="index.html">Home</a></li>
    <li><a href="brand_elements.html">Brand Elements</a></li>
    <li><a href="scenes.html">Scenes</a></li>
    <li><a href="live_action.html">Live Action</a></li>
</ul>

JavaScript

(function(){

    const body = document.querySelector("body");

    window.addEventListener("load", function(){
        body.classList.add("active");
    });

    var pageSelect = document.querySelectorAll("ul.menu li a");

    var changePage = function(page){

        var ajax = new XMLHttpRequest();

        ajax.open("GET", page, true);
        ajax.send();

        body.classList.remove("active");
    }

    for (page of pageSelect){
        page.addEventListener("click", function(e){
            changePage(this);
        });
    }

})();