Question

我正在使用BarbaJS（我已经在github上提出了一个问题）用于带有标题导航和徽标的基本网站构建，当我使用导航项时转换是完美的，但是当我点击标题徽标时链接（内置SVG）它只是重新加载浏览器，我无法看到为什么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()

Answer 1

添加＆＃39;指针事件：无＆＃39;到Header徽标中的svg解决了这个问题。

BarbaJS在导航栏中工作正常，但特定链接没有转换页面

1 个答案: