我正在尝试使用和自定义Barba.js（a page transition library）
但我遇到了一些问题。我试图通过vanilla JS来缓慢替换上面链接中提供的代码，并依赖于CSS转换而不是jQuery animate（）。
这是我一起召唤的代码。它工作正常，直到它应该进入fadeIn（）函数。它永远不会到达那里。我已经删除了所有触发该功能的尝试，因为我不知道在哪里/如何。
链接的网站使用了jQuery的.promise（）函数来验证fadeOut（）函数是否已经完成，但我无法弄清楚如何使用vanilla JS复制它。
我需要更改什么才能让JS进入fadeIn（）函数？
document.addEventListener("DOMContentLoaded", function() {
Barba.Pjax.Dom.wrapperId = "container";
Barba.Pjax.Dom.containerClass = 'wrapper';
Barba.Pjax.start();
var FadeTransition = Barba.BaseTransition.extend({
start: function() {
Promise
// don't progres until newContainerLoading and old content/fadeOut is done
this.newContainerLoading
// when it's verified that above is complete, run the fadeIn function below
.then(this.fadeOut.bind(this));
},
fadeOut: function() {
console.log("fadeOut started");
this.oldContainer.classList.add("animate-out");
let element = document.getElementById("wrap");
element.addEventListener("transitionend", function(event) {
console.log("transition end");
});
},
fadeIn: function() {
console.log("fadeIn started");
$(this.oldContainer).hide();
this.newContainer.style.visibility = 'visible';
this.newContainer.style.opacity = 1;
}
});
Barba.Pjax.getTransition = function() {
return FadeTransition;
};
});