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()
ヘッダー_logoでh4タグのSVGをスワップしただけで、うまくいきました...理由はわかりません。 – Jay