Estoy tratando de implementar una transición suave cada vez que cargo contenido dentro del contenedor div de una aplicación de una sola página. No estoy usando Reactjs, solo una función onclick para cargar el contenido dentro de mi div #main-content con una solicitud Get.

Como referencia, así es como se ve la función onclick dentro del archivo de índice: <a class="" id="home-top-nav" href="#" onclick="$pf.homeHtml()">

Así es como se vería la solicitud de contenido en js (invocando un IIFE: global.$pf = pf):

 pf.homeHtml = function () { $ajaxUtils.sendGetRequest(homeHtml, function (responseText) {document.querySelector("#main-content").innerHTML = responseText; }, false); };

En este caso, el texto de responseText es el fragmento html analizado que se inserta en el contenido principal con una solicitud ajax. Hay muchos otros fragmentos que se cargan cada vez que hago clic y solicito otra página (acerca de, contacto, etc.).

He intentado usar Swup sin éxito.

¿Qué puedo hacer para simplemente agregar un efecto de atenuación a la descarga de contenido y un efecto de atenuación a la carga de contenido nuevo dentro del #contenido principal en lugar de tener una transición difícil entre ellos?