2017-08-17 1 views
0

BarbaJSを使用しています(私はgithubでも問題を提起しました)。ヘッダーnavとロゴ付きの基本的なサイト構築では、トランジションは完璧です私がnav項目を使用するとき、ヘッダーロゴリンク(SVGが内部にある)をクリックするとブラウザがリロードされ、BarbaJSがヘッダーロゴだけを起動しない理由はわかりません。Navbarでうまく動作するBarbaJSの問題ですが、ページを移動しない特定のリンク

アドバイスはすばらしいでしょう、歓声。 (取り外しモバイルNAVのハンバーガーのようなものを持つ)

HTMLマークアップ:

<div class="site" id="barba-wrapper"> 
    <header class="header"> 
     <div class="wrapper header__inner"> 

      <a href="/" class="header__logo"> 
       <div class="icon icon--brand-logo"> 
        <svg><use xlink:href="#brand-logo"></use></svg> 
       </div> 
      </a> 

      <nav class="menu__wrapper"> 
       <span class="menu__mask"></span> 
       <ul class="menu__list r-ul"> 
        <li class="menu__item"><a href="/content.html"class="menu__link">Menu item</a></li> 
        <li class="menu__item"><a href="/content2.html" class="menu__link">Item two</a></li> 
        <li class="menu__item"><a href="#" class="menu__link">Another item</a></li> 
       </ul> 
      </nav> 

     </div> 
    </header> 

    <div class="site-wrap barba-container has-hero" id="js-site-wrap"> 
    <!-- Site content that is getting replaced --> 
    </div> 

</div> 

BarbaJS(ちょうど今のレポから基本的なフェードを使用して...):

import Barba from 'barba.js' 

var FadeTransition = Barba.BaseTransition.extend({ 
    start: function() { 
     Promise 
      .all([this.newContainerLoading, this.fadeOut()]) 
      .then(this.fadeIn.bind(this)) 
    }, 

    fadeOut: function() { 
     return $(this.oldContainer).animate({ opacity: 0 }).promise() 
    }, 

    fadeIn: function() { 
     $("html, body").animate({ scrollTop: '0' }) 

     if ('scrollRestoration' in history) { 
      history.scrollRestoration = 'manual'; 
     } 

     const _this = this, 
      $el = $(this.newContainer) 
      $(this.oldContainer).hide() 

     $el.css({ 
      visibility: 'visible', 
      opacity: 0 
     }) 

     $el.animate({ opacity: 1 }, 500, function() { 
      _this.done() 
     }) 
    } 
}) 

Barba.Pjax.getTransition = function() { 
    return FadeTransition 
} 

Barba.Prefetch.init() 
Barba.Pjax.start() 
+0

ヘッダー_logoでh4タグのSVGをスワップしただけで、うまくいきました...理由はわかりません。 – Jay

答えて

0

「ポインタを追加します-events:none 'をヘッダーロゴ内のsvgに送信してこれを解決しました。

関連する問題