解决方法是在Barba.js 和GSAP之间添加自定义过渡。使用Barba.js的beforeEnter钩子，在新页面加载之前设置页面位置，确保从上方滑入。然后，使用GSAP Tweenmax动画库来执行从顶部滑入的动画。以下是示例代码：

/* 在 Barba.js 和 GSAP 之间添加自定义过渡 */
const pageTransition = function() {
  // 设置页面位置
  const tl = new TimelineMax();
  tl.fromTo('.page-transition', 0.5,
    {translateY: '0%'},
    {translateY: '-100%', ease: 'easeInOutQuad'}
  )
  .fromTo('.barba-container', 0.5,
    {translateY: '100%'},
    {translateY: '0%', ease: 'easeInOutQuad', onComplete: function() {
      // 动画完成后移除页面切换元素
      document.querySelector('.page-transition').remove();
    }}
  );
};

/* Barba.js 的 beforeEnter 钩子 */
barba.hooks.beforeEnter((data) => {
  // 检查页面是否使用了自定义过渡
  if (data.current.namespace === 'home' && data.next.namespace === 'contact') {
    // 添加页面切换元素
    const transitionEl = document.createElement('div');
    transitionEl.classList.add('page-transition');
    document.body.appendChild(transitionEl);

    // 初始化页面位置并执行动画
    pageTransition();
  }
});