barba页面转换后如何重新初始化其他脚本?

时间:2020-05-09 12:41:59

标签: javascript html css transition barbajs

我正在尝试在我的网站上添加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>

0 个答案:

没有答案