问题BarbaJS在导航栏中工作正常，但具体链接不过渡页面

我使用BarbaJS（我在github上也提出了一个问题）对于带有头部导航和标识的基本站点构建，过渡是完美的当我使用导航项目，但当我点击标题徽标链接（与SVG里面）它只是重新加载浏览器，我看不到为什么BarbaJS不会只为标题徽标射击的原因...问题BarbaJS在导航栏中工作正常，但具体链接不过渡页面

任何建议将是伟大的，欢呼声。

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()

来源

2017-08-17 Jay

我只是在header_logo中换出了一个h4标签的SVG，它工作得更好......为什么......我不确定。 – Jay

添加“指针-events：none'在Header标识中的svg解决了这个问题。

来源

2017-08-19 11:28:22 Jay

问题BarbaJS在导航栏中工作正常，但具体链接不过渡页面

回答

相关问题