我正在尝试在我的网站上添加barba.js页面转换。一切正常,唯一的问题是过渡结束后,所有其他脚本均不起作用。我试过使用getSript功能和barba调度程序,但似乎没有任何效果。我正在使用barba v1。我是javascript新手,也许我会错误地应用它们。我想在过渡结束后重新初始化其他脚本。需要指导!
/************************** BARBA **************************/
Barba.Pjax.start();
var FadeTransition = Barba.BaseTransition.extend({
start: function() {
"use strict";
Promise.all([this.newContainerLoading, this.fadeOut()]).then(
this.fadeIn.bind(this)
);
},
fadeOut: function() {
"use strict";
this.oldContainer.classList.add("slide-out");
},
fadeIn: function() {
"use strict";
this.newContainer.classList.add("slide-in");
var that = this;
this.newContainer.addEventListener("animationend", function() {
that.newContainer.classList.remove("slide-in");
that.done();
});
}
});
Barba.Pjax.getTransition = function() {
"use strict";
return FadeTransition;
};
.slide-in {
animation: slide-in 0.7s ease-in-out both;
}
.slide-out {
animation: slide-out 0.7s ease-in-out both;
}
@keyframes slide-in {
from {
transform: translate(100%);
visibility: visible;
}
to {
transform: translate(0%);
}
}
@keyframes slide-out {
from {
transform: translate(0%);
}
to {
transform: translate(-100%);
}
}
<div id="barba-wrapper">
<div class="barba-container">
<div class="main-content">
<!--MY HTML CODE-->
</div>
</div>
</div>