问题出在使用 GSAP 库里的 TweenMax 应用到 Barba 将要进入的页面时,会导致页面上的元素抖动或者闪烁。解决方案是在 Barba 进入新页面之前,将 TweenMax 应用到页面的一些基本元素上,比如 body、main 等,再执行页面切换。
代码示例:
const fadeOut = ({current, next, trigger}) => {
return new Promise(resolve => {
const timeline = new TimelineMax({
onComplete: () => {
current.container.remove();
resolve();
}
});
timeline.set(current.container, {
position: 'fixed',
top: 0,
left: 0,
width: '100%',
overflow: 'hidden'
});
timeline.set(next.container, {
position: 'fixed',
top: '100%',
left: 0,
width: '100%',
overflow: 'hidden',
zIndex: 2
});
const elements = document.querySelectorAll('body, main');
timeline.to(elements, 0.3, {
y: '-50px',
opacity: 0,
ease: Power2.easeInOut
});
timeline.to(current.container, 0.6, {
y: '-100%',
ease: Power2.easeInOut,
delay: 0.1
});
timeline.to(next.container, 0.6, {
y: 0,
ease: Power2.easeInOut
});
timeline.to(elements, 0.6, {
y: 0,
opacity: 1,
ease: Power2.easeInOut,
delay: 0.5
});
});
};
Barba.Pjax.start();
Barba.Dispatcher.on('newPageReady', ({current, next, trigger}) => {
if (trigger === 'popstate') {
// popstate 是点击浏览器返回按钮后触发的事件,在这种情况下不加动画
current.container.remove();
return;
}
return fadeOut({current, next, trigger});
});
上一篇:barbajs过渡后网格消失