在Barba.js中使用GSAP创建页面滑动转场特效时,会发生页面样式异常、页面闪烁等问题,这是由于Barba.js默认使用jQuery进行DOM操作导致的。为了解决这个问题,可以使用GSAP的TweenLite模块代替jQuery进行DOM操作,实现更加顺畅的页面转场效果。
代码示例:
var FadeTransition = Barba.BaseTransition.extend({
start: function() {
Promise.all([this.newContainerLoading, this.fadeOut()])
.then(this.fadeIn.bind(this));
},
fadeOut: function() {
var deferred = Barba.Utils.deferred();
TweenLite.to(this.oldContainer, 0.5, {
opacity: 0,
onComplete: function() {
deferred.resolve();
}
});
return deferred.promise;
},
fadeIn: function() {
var _this = this;
var $el = $(this.newContainer);
$(this.oldContainer).hide();
$el.css({
visibility: 'visible',
opacity: 0
});
TweenLite.to($el, 0.5, {
opacity: 1,
onComplete: function() {
_this.done();
}
});
}
});
Barba.Pjax.getTransition = function() {
return FadeTransition;
};
通过以上方法,可以在Barba.js + GSAP页面滑动转场中解决页面样式异常的问题。