Problème avec BarbaJS fonctionnant correctement dans navbar, mais les liens spécifiques ne transforment pas les pages

Question

J'utilise BarbaJS (j'ai aussi soulevé un problème sur le github) pour un build de site de base avec un en-tête nav et un logo, les transitions sont parfaites quand j'utilise les éléments nav, mais quand je clique sur le lien logo d'en-tête (avec SVG à l'intérieur) il recharge juste le navigateur et je ne vois pas pourquoi le BarbaJS ne déclenche pas le logo d'en-tête ...

Tout conseil serait génial, bravo.

Balise HTML (avec des choses comme hamburger mobile nav enlevés):

<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 (juste en utilisant le fondu de base de la pension pour le moment ...):

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

Answer 1

Ajout « pointeur -events: none 'svg dans le logo Header résolu cela.