Мне удалось сделать переход страницы в jquery с помощью div class="transition" и поместить в него весь контент, который я хочу анимировать. Проблема в том, что у меня на каждой странице разные JS, запускающие разные элементы. Таким образом, скрипт перехода работает отлично, а остальные - нет. Поэтому я попытался поместить их в div class="transition", но ни один из них не помог.
Это исправление или лучший способ сделать переход страницы?
Вот переход страницы:
let isAnimating;
$('a').on('click', function(event){
event.preventDefault();
let newPageUrl = $(this).attr('href');
if( !isAnimating ) changePage(newPageUrl);
});
function changePage(url) {
$("header a").removeClass("enCours");
isAnimating = true;
$( ".transition" ).animate({
opacity: 0,
top : "-15vh"
}, 500, function() {
loadNewContent(url);
});
}
function loadNewContent(url) {
if(url != window.location){
window.history.pushState({path: url},'',url);
}
$.ajax({
url: url,
success: function (data) {
const newContent = $(data).filter(".transition").html();
$(".transition").html(newContent);
console.log(url);
checkColorPage(url);
if (typeof root == undefined) {
const root = document.documentElement;
};
root.style.setProperty("--gris", "#232323");
root.style.setProperty("--white", "white");
$( ".transition" ).animate({
opacity: 0,
top : "15vh"
}, 0, function() {
$( ".transition" ).animate({
opacity: 1,
top : 0
}, 500);
});
isAnimating = false;
}
});
}
$(window).on('popstate', function() {
let newPageArray = location.pathname.split('/'),
newPageUrl = newPageArray[newPageArray.length - 1];
console.log(newPageArray);
headerTitles = document.querySelectorAll("a");
headerTitles.forEach(element =>{
let compareUrl = element.getAttribute('href');
if(newPageUrl === compareUrl){
newHeaderLink = element;
};
})
if( !isAnimating ) changePage(newHeaderLink, newPageUrl);
});
Вот два разных примера моего html:
<body>
<header class="header">
Here is my header which is not on the transition div
</header>
<div class="transition">
<section>
Here is my content
</section>
</div>
//Notice there are different scripts
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/colorPage.js"></script>
<script src="js/transition.js"></script>
</body>
Вторая страница
<body>
<header class="header">
Here is my header which is not on the transition div
</header>
<div class="transition">
<section>
Here is my content
</section>
</div>
//Notice there are different scripts
<script type="text/javascript" src="js/projectLink.js"></script>
<script type="text/javascript" src="js/colorPage.js"></script>
<script src="js/transition.js"></script>
</body>
PS: я разработчик-самоучка, поэтому вы можете увидеть некоторые ужасные вещи. Не стесняйтесь меня поправлять, это мой единственный способ учиться!