some how my page design is distroyed after Jquery pjax transition. i use barba.js . onload everything i ok. but after transition page design is distroyed. in simple html website my transition work without any problem.. but in wordpress it doesnt. i dont know what is the problem with my code : this is my website: http://schreibbescwer.de/elite
document.addEventListener('DOMContentLoaded', function() {
Barba.Pjax.init();
Barba.Prefetch.init();
var Homepage = Barba.BaseView.extend({
namespace: 'homep',
sync: true,
onEnter() {},
onEnterCompleted() {},
onLeave() {},
onLeaveCompleted() {}
});
Homepage.init();
var About = Barba.BaseView.extend({
namespace: 'aboutp',
sync: true,
onEnter() {},
onEnterCompleted() {},
onLeave() {},
onLeaveCompleted() {}
});
About.init();
var Newspress = Barba.BaseView.extend({
namespace: 'newsp',
sync: true,
onEnter() {},
onEnterCompleted() {},
onLeave() {},
onLeaveCompleted() {}
});
Newspress.init();
var Tedbirler = Barba.BaseView.extend({
namespace: 'tedbirlerp',
sync: true,
onEnter() {},
onEnterCompleted() {},
onLeave() {},
onLeaveCompleted() {}
});
Tedbirler.init();
var pageTransition = Barba.BaseTransition.extend({
start: function() {
this.newContainerLoading.then(
val => this.fadeInNewcontent(this.newContainer, this.oldContainer)
);
},
transitionFinished(newContainer, oldContainer) {
newContainer.style.visibility = "visible";
window.scrollTo(0, 0);
this.done();
},
fadeInNewcontent: function(newContainer, oldContainer) {
newContainer.classList.add('new');
var _this = this;
const transition = this.oldContainer.animate([
{ opacity: 1 },
{ opacity: 0 }
], {duration: 1000});
transition.onfinish = function() {
_this.transitionFinished(newContainer, oldContainer);
};
}
});
Barba.Pjax.getTransition = function() {
return pageTransition;
}
Barba.Pjax.start();
}, false);