0
를 교체 나는 다시로드하지 않고 페이지를 이동하고 부드러운 애니메이션을 만들 수 barba.js를 사용합니다.Barba.js (Pjax.js)와 <head>가
이 제품은 example입니다.
그리고 예에서 짧은 코드 :
document.addEventListener("DOMContentLoaded", function() {
Barba.Pjax.init();
Barba.Prefetch.init();
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() {
var _this = this;
var $el = $(this.newContainer);
$(this.oldContainer).hide();
$el.css({
visibility: 'visible',
opacity: 0
});
$el.animate({
opacity: 1
}, 400, function() {
_this.done();
});
},
newContainer: function() {
var $newPageHead = $('<head />').html(
$.parseHTML(
newPageRawHTML.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0], document, true
)
);
},
done: function() {
var headTags = [
"meta[name='keywords']",
"meta[name='description']",
"meta[property^='og']",
"meta[name^='twitter']",
"meta[itemprop]",
"link[itemprop]",
"link[rel='prev']",
"link[rel='next']",
"link[rel='canonical']"
].join(',');
$('head').find(headTags).remove();
$newPageHead.find(headTags).appendTo('head');
}
});
Barba.Pjax.getTransition = function() {
return FadeTransition;
};
});<script src="https://cdnjs.cloudflare.com/ajax/libs/barba.js/0.0.10/barba.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<ul class="uMenuRoot">
<li><a href="/"><span>Home</span></a></li>
<li><a href="/about.html"><span>About us</span></a></li>
<li><a href="/contacts.html"><span>Contacts</span></a></li>
</ul>
<main id="barba-wrapper">
<section class="barba-container middle">
Page content \t \t
</section>
</main>가 나는 <head>를 다시로드 할 수 있는지 궁금해? 다른 말로하면 태그의 내용을 추출하고 이미로드 된 <head> 구조를 대체합니다.
또한,하지만 일부 데이터, <head>에서 모든 스타일과 스크립트를 대체 할 좋은 것입니다. 예를 들어 OpenGraph 마크 업과 같습니다.
예에서 사용 된 애니메이션에 대한 자세한 내용을 읽어
는 here을 설명했다.사실, 우리는 코드의이 부분에 대해 얘기 :
newContainer: function() {
var $newPageHead = $('<head />').html(
$.parseHTML(
newPageRawHTML.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0], document, true
)
);
},
done: function() {
var headTags = [
"meta[name='keywords']",
"meta[name='description']",
"meta[property^='og']",
"meta[name^='twitter']",
"meta[itemprop]",
"link[itemprop]",
"link[rel='prev']",
"link[rel='next']",
"link[rel='canonical']"
].join(',');
$('head').find(headTags).remove();
$newPageHead.find(headTags).appendTo('head');
}
을 나는 <head>에서 일부 항목을 추출 할 코드의이 부분에서 바로 페이지를로드 할 수 있습니다. 그런 다음 애니메이션 요소 뒤에있는 요소를 제거하고 이전에받은 요소로 바꿉니다.
애니메이션의 종료 후, 선택된 요소는 사라지고,하지만 새로 추가하지 않는다. 그 밖의 무엇이 바뀌었고 나는 모릅니다. 샘플 코드 here을 수정할 수 있습니다.
감사 :
당신이 정말로 그 정보를 업데이트하려면
는, 누군가가 코드 조각을했다. 이것은 정말 멋진 스크립트입니다. 토론과 스 니펫에 관해서는 당신이 답장을 보냈습니다. 나는 그 코드를 넣으려고했는데 그것은 나를 위해 작동하지 않습니다. 이 [데모] (https://plnkr.co/edit/MRgZ6oE5s17QugpST5so?p=preview)로 작업 할 수 있습니다. 나는 당신의 도움에 매우 감사 할 것입니다. –거기에 가세요 : https://plnkr.co/edit/wfgMT7kbvX3mhoGDggli?p=preview Barba.js의 최신 버전으로 전환하고 스 니펫을 복사하여 붙여 넣기 만하면됩니다. –
이것은 일종의 마술입니다. 나는 많은 시간을 똑같이했고 그것이 효과가 없었습니다. 고마워요! 마지막 질문 중 하나는 '
'또는 ''에서 일부 스크립트를 다시 시작하거나 다시로드 할 수 있습니까? 그리고 link 매개 변수로 검사해야하는 요소를 설정할 수 있습니까? 내가 이해 했으니 이제는 모두 '' 태그입니다. 일반적으로 [여기] (https://github.com/grenouille220/jquery-sail)와 동일한 제어를 할 수 있습니까? –