頁面轉換導致移動導航不可點擊

Question

我在這裏有兩個主要的jQuery元素。一種是用另一頁替換頁面內容的頁面轉換，另一種是智能導航（手機上的移動導航和頁面滾動）。

轉換和導航在桌面設備上完美工作。問題是，當您跳轉到移動導航時，它變得無法點擊。

只有在完成頁面轉換後才能點擊，所以我確信它們以某種方式衝突。

活頁是這裏https://nathanworking.github.io/page-transition-smart-nav/

這兩個腳本如下。 注意：我所做的合併這些作品很簡單，在我的.js文件中有第一個「智能導航」第二個「動畫頁面轉換」。

如果我只是把這兩個錯誤結合起來，任何人都有想法如何合併這些？

感謝您的幫助！

動畫頁面過渡

/*----------------------------------- 

    ----- Animated Page transitions ------ 

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

    //trigger smooth transition from the actual page to the new one 
    $('body').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-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 
     loadNewContent(url, bool); 
     newLocation = url; 
     $('.cd-loading-bar').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 newSection = 'cd-'+url.replace('.html', ''); 
    var section = $('<div class="cd-main-content '+newSection+'"></div>'); 

    section.load(url+' .cd-main-content > *', function(event){ 
     // load new content and replace <main> content with the new one 
     $('main').html(section); 
     //if browser doesn't support CSS transitions - dont wait for the end of transitions 
     var delay = (transitionsSupported()) ? 1200 : 0; 
     setTimeout(function(){ 
     //wait for the end of the transition on the loading bar before revealing the new content 
     (section.hasClass('cd-about')) ? $('body').addClass('cd-about') : $('body').removeClass('cd-about'); 
     $('body').removeClass('page-is-changing'); 
     $('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 
      isAnimating = false; 
      $('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'); 
     }); 

     if(!transitionsSupported()) isAnimating = false; 
     }, delay); 

     if(url!=window.location && bool){ 
     //add the new page to the window.history 
     //if the new page was triggered by a 'popstate' event, don't add it 
     window.history.pushState({path: url},'',url); 
     }       

     }); 
    } 

    function transitionsSupported() { 
    return $('html').hasClass('csstransitions'); 
    } 
}); 

智能導航

/*----------------------------------- 

    ----- Smart Navigation ------ 

--------------------------------------*/ 
jQuery(document).ready(function($){ 
    // browser window scroll (in pixels) after which the "menu" link is shown 
    var offset = 300; 

    var navigationContainer = $('#cd-nav'), 
     mainNavigation = navigationContainer.find('#cd-main-nav ul'); 

    //hide or show the "menu" link 
    checkMenu(); 
    $(window).scroll(function(){ 
     checkMenu(); 
    }); 

    //open or close the menu clicking on the bottom "menu" link 
    $('.cd-nav-trigger').on('click', function(){ 
     $(this).toggleClass('menu-is-open'); 
     //we need to remove the transitionEnd event handler (we add it when scolling up with the menu open) 
     mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible'); 

    }); 

    function checkMenu() { 
     if($(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) { 
      navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){ 
       mainNavigation.addClass('has-transitions'); 
      }); 
     } else if ($(window).scrollTop() <= offset) { 
      //check if the menu is open when scrolling up 
      if(mainNavigation.hasClass('is-visible') && !$('html').hasClass('no-csstransitions')) { 
       //close the menu with animation 
       mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 
        //wait for the menu to be closed and do the rest 
        mainNavigation.removeClass('is-visible is-hidden has-transitions'); 
        navigationContainer.removeClass('is-fixed'); 
        $('.cd-nav-trigger').removeClass('menu-is-open'); 
       }); 
      //check if the menu is open when scrolling up - fallback if transitions are not supported 
      } else if(mainNavigation.hasClass('is-visible') && $('html').hasClass('no-csstransitions')) { 
        mainNavigation.removeClass('is-visible has-transitions'); 
        navigationContainer.removeClass('is-fixed'); 
        $('.cd-nav-trigger').removeClass('menu-is-open'); 
      //scrolling up with menu closed 
      } else { 
       navigationContainer.removeClass('is-fixed'); 
       mainNavigation.removeClass('has-transitions'); 
      } 
     } 
    } 
}); 

與ryancdotnet評論 - 這是正確的jQuery：

/*----------------------------------- 

    ----- Animated Page transitions ------ 

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

    //trigger smooth transition from the actual page to the new one 
    $('body').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-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 
     loadNewContent(url, bool); 
     newLocation = url; 
     $('.cd-loading-bar').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 newSection = 'cd-'+url.replace('.html', ''); 
    var section = $('<div class="cd-main-content '+newSection+'"></div>'); 

    section.load(url+' .cd-main-content > *', function(event){ 
     // load new content and replace <main> content with the new one 
     $('main').html(section); 
     //if browser doesn't support CSS transitions - dont wait for the end of transitions 
     var delay = (transitionsSupported()) ? 1200 : 0; 
     setTimeout(function(){ 
     //wait for the end of the transition on the loading bar before revealing the new content 
     (section.hasClass('cd-about')) ? $('body').addClass('cd-about') : $('body').removeClass('cd-about'); 
     $('body').removeClass('page-is-changing'); 
     $('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 
      isAnimating = false; 
      $('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'); 
     }); 

// ----- Animated Page transitions ------ 
       //open or close the menu clicking on the bottom "menu" link 
       jQuery(document).ready(function($){ 
        // browser window scroll (in pixels) after which the "menu" link is shown 
        var offset = 300; 

        var navigationContainer = $('#cd-nav'), 
         mainNavigation = navigationContainer.find('#cd-main-nav ul'); 

        //hide or show the "menu" link 
        checkMenu(); 
        $(window).scroll(function(){ 
         checkMenu(); 
        }); 

        //open or close the menu clicking on the bottom "menu" link 
        $('.cd-nav-trigger').on('click', function(){ 
         $(this).toggleClass('menu-is-open'); 
         //we need to remove the transitionEnd event handler (we add it when scolling up with the menu open) 
         mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible'); 

        }); 

        function checkMenu() { 
         if($(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) { 
          navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){ 
           mainNavigation.addClass('has-transitions'); 
          }); 
         } else if ($(window).scrollTop() <= offset) { 
          //check if the menu is open when scrolling up 
          if(mainNavigation.hasClass('is-visible') && !$('html').hasClass('no-csstransitions')) { 
           //close the menu with animation 
           mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 
            //wait for the menu to be closed and do the rest 
            mainNavigation.removeClass('is-visible is-hidden has-transitions'); 
            navigationContainer.removeClass('is-fixed'); 
            $('.cd-nav-trigger').removeClass('menu-is-open'); 
           }); 
          //check if the menu is open when scrolling up - fallback if transitions are not supported 
          } else if(mainNavigation.hasClass('is-visible') && $('html').hasClass('no-csstransitions')) { 
            mainNavigation.removeClass('is-visible has-transitions'); 
            navigationContainer.removeClass('is-fixed'); 
            $('.cd-nav-trigger').removeClass('menu-is-open'); 
          //scrolling up with menu closed 
          } else { 
           navigationContainer.removeClass('is-fixed'); 
           mainNavigation.removeClass('has-transitions'); 
          } 
         } 
        } 
       }); 
// ----- Animated Page transitions ------ 

     if(!transitionsSupported()) isAnimating = false; 
     }, delay); 

     if(url!=window.location && bool){ 
     //add the new page to the window.history 
     //if the new page was triggered by a 'popstate' event, don't add it 
     window.history.pushState({path: url},'',url); 
     } 

     }); 
    } 

    function transitionsSupported() { 
    return $('html').hasClass('csstransitions'); 
    } 
}); 

Answer 1

移動導航似乎總是失敗後第一次點擊。在調試時，看起來您正在移除菜單並重新添加菜單，但點擊事件之後未被連線。

具體來說，這部分似乎並沒有被再被解僱：

$('.cd-nav-trigger').on('click',......