Problème de transition AjaxLoad

Résolu/Fermé
Sparkflo Messages postés 28 Date d'inscription mardi 20 mai 2014 Statut Membre Dernière intervention 14 janvier 2019 - Modifié le 14 janv. 2019 à 17:05
Sparkflo Messages postés 28 Date d'inscription mardi 20 mai 2014 Statut Membre Dernière intervention 14 janvier 2019 - 14 janv. 2019 à 18:04
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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
14 janv. 2019 à 17:52
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 28 Date d'inscription mardi 20 mai 2014 Statut Membre Dernière intervention 14 janvier 2019
14 janv. 2019 à 18:04
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