Это ответ без использования обертки. Предположим, что мне нужно заменить элемент repID на pagID, где элемент repID dims для 0.5sec, а элемент padID становится непрозрачным в течение следующих 0.5 секунд, тогда это можно сделать, используя следующий код в CSS,
#repIdName{
transition: opacity .5s ease-in-out;}
и следующее в JavaScript
function replaceID(repId,pagID){
var mainContent = document.getElementById(repID);
var homeContent = document.getElementById(pagID).innerHTML;
mainContent.style.opacity = 0;
window.setTimeout(function () {
mainContent.innerHTML = homeContent;
console.log(pagID+"opened");
mainContent.style.opacity = 1;
},500);}
в HTML, вызов функции будет примерно таким же
<a href="#"onclick="replaceID('repIdName','pagIdName)">