Problème de transition AjaxLoad

Résolu
Sparkflo Messages postés 32 Statut Membre -  
Sparkflo Messages postés 32 Statut Membre -
Salut ! J'ai téléchargé mon site web sur un hébergeur payant et, j'ai réalisé que les transitions entre les pages ne fonctionnaient pas comme d'habitude. Je pense que l'actualisation de la page n'est pas faite correctement et crée une collision avec le z-index. Je ne sais pas assez en js pour résoudre le problème seul ..

Site bugé : https://heysen.fr
Site qui lui, est fonctionnel : http://flusha.000webhostapp.com/
Mon hébergeur : https://www.ionos.fr/


Côté JS (Attention aux yeux) :


/*--------------------------------------------------
Function Ajax Load
---------------------------------------------------*/

function AjaxLoad() {

jQuery(document).ready(function(){
var isAnimating = false,
newLocation = '';
firstLoad = false;

//trigger smooth transition from the actual page to the new one
$('main').on('click', '[data-type="page-transition"]', function(event){
event.preventDefault();
//detect which page has been selected
var newPage = $(this).attr('href');
//if the page is not already being animated - trigger animation
if( !isAnimating ) changePage(newPage, true);
firstLoad = true;
});

//detect the 'popstate' event - e.g. user clicking the back button
$(window).on('popstate', function() {
if( firstLoad ) {
/*
Safari emits a popstate event on page load - check if firstLoad is true before animating
if it's false - the page has just been loaded
  • / var newPageArray = location.pathname.split('/'), //this is the url of the page to be loaded newPage = newPageArray[newPageArray.length - 1]; if( !isAnimating && newLocation != newPage ) changePage(newPage, false); } firstLoad = true; }); function changePage(url, bool) { isAnimating = true; // trigger page animation $('body').addClass('page-is-changing'); $('.cd-cover-layer').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ loadNewContent(url, bool); newLocation = url; $('.cd-cover-layer').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'); }); //if browser doesn't support CSS transitions if( !transitionsSupported() ) { loadNewContent(url, bool); newLocation = url; } } function loadNewContent(url, bool) { url = ('' == url) ? 'index.html' : url; var section = $('<div class="cd-main-content "></div>'); section.load(url+' .cd-main-content > *', function(event){ // load new content and replace <main> content with the new one FullPageDestroy(); $('main').html(section); var clapat_title = event.match(/<title[^>]*>([^<]+)<\/title>/)[1]; $('head title').html( clapat_title ); //if browser doesn't support CSS transitions - dont wait for the end of transitions var delay = ( transitionsSupported() ) ? 30 : 0; setTimeout(function(){ $('body').removeClass('page-is-changing'); $('.cd-cover-layer').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ isAnimating = false; $('.cd-cover-layer').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'); }); ga('set', 'page', '/' + url); ga('send', 'pageview'); FirstLoad(); HeroSection(); FullPage(); LazyLoad(); MasonryPortfolio(); NextProject(); Sliders(); FooterAppear(); Lightbox(); AppearIteam(); BackToTop(); ContactForm(); CollagePlus(); PageShare(); ContactMap(); if( !transitionsSupported() ) isAnimating = false; }, delay); if(url!=window.location && bool){ window.history.pushState({path: url},'',url); } }); } function transitionsSupported() { return $('html').hasClass('csstransitions'); } }); }// End Ajax Load


Pour l'html ça donne ça tout simplement :


<a class="ajax-link" data-type="page-transition" href="index.html">



Ps : Je ne sais pas exactement si c'est bien Ajax qui fait bug les transitions, je peux fournir tous le script s'il faut :)

1 réponse

jordane45 Messages postés 40050 Statut Modérateur 4 756
 
Bonjour,

J'ai exactement le même comportement sur les deux sites.
Ne penses tu pas que tu aurais simplement un souci de cache au niveau de ton navigateur ?
As tu essayé avec un autre navigateur ? en mode privé ? en vidant ton cache avant ?

2
Sparkflo Messages postés 32 Statut Membre
 
Effectivement, c'est très bête de ne pas y avoir pensé avant, ça fonctionne parfaitement sur mobile et autre navigateur...
Merci beaucoup haha !
0