Barba.js + GSAP页面上滑过渡异常问题求助

我是Barba.js新手，正尝试实现一种页面过渡效果：主页为长按钮列表，点击按钮后目标页面从底部向上滑入。目前在页面顶部时过渡正常，但滚动到主页下方后，过渡会出现Y轴偏移、动画速度异常加快，滚动过远时甚至无过渡直接跳转至新页面。

相关代码 #

app.js过渡逻辑代码 #

包含上滑、下滑两种过渡效果（离开主页用上滑，返回主页用下滑），还添加了"stick"过渡以固定主页容器，让新页面在其上方过渡。

import barba from '@barba/core';
import { slideup, slideup_end, slidedown, stick, } from './animations';


barba.hooks.after(() => {
  scroll.update();
});

barba.init({
  debug: true,
  transitions: [

    {
      sync: true,
      name: 'home',
      to: {
        namespace: ['home']
      },
      once: ({ next }) => { stick(next.container); smooth(); },
      leave: ({ current }) => slidedown(current.container),
      enter: ({ next }) => { stick(next.container); },

    },



    {
      sync: true,
      name: 'architecture',
      to: {
        namespace: ['architecture']
      },
      once: ({ next }) => { slideup(next.container); smooth(); },
      leave: ({ current }) => stick(current.container),
      enter: ({ next }) => { slideup(next.container); },

    },
  ],
});

上滑动画代码 #

import gsap from 'gsap';

const slideup = (container) => {
  gsap.set(container, { y: window.innerHeight, opacity: 1, autoAlpha: 1 });
  const timeline = gsap.timeline();
  const bgColor = container.dataset.bgColor || '#ffffff'; // Set a default background color if not specified
  container.style.backgroundColor = bgColor; // Set the initial background color

  timeline
    .fromTo(container, { y: window.innerHeight }, { y: 0, duration: 2 })
    .eventCallback('onStart', () => {
      container.classList.add('transition-active');
    })
    .eventCallback('onComplete', () => {
      container.classList.remove('transition-active');
    });

  return timeline;
};

export default slideup;

问题原因及修复方案 #

1. 滚动位置未重置导致Y轴偏移 #

页面滚动后，Barba不会自动重置滚动位置，新容器的动画基于当前视口位置计算，直接导致Y轴偏移。

修复：在过渡开始前强制重置滚动到顶部，添加全局钩子：

barba.hooks.before(() => {
  window.scrollTo(0, 0);
});

2. Sync模式下动画冲突导致速度异常 #

启用sync: true意味着离开和进入动画同时执行，若stick函数未正确固定容器定位，当前容器和新容器的位置会因滚动相互干扰，压缩动画时长或引发冲突。

修复：

• 确保stick函数给容器添加固定定位，避免滚动影响：

  export const stick = (container) => {
    gsap.set(container, {
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      overflow: 'hidden'
    });
  };
  

• 若无需同步动画，可将sync改为false，让离开动画完成后再执行进入动画。

3. 滚动过远时无过渡的问题 #

页面滚动超出当前容器可视范围时，Barba可能因容器脱离视口导致过渡逻辑异常。

修复：通过stick函数固定当前容器在视口内（参考上面的stick实现），确保过渡期间容器始终可见，动画能正常触发。

4. 动画初始化未考虑容器定位 #

当前slideup函数直接设置y: window.innerHeight，但容器在文档流中的位置会因滚动偏移，导致初始位置计算错误。

修改后的slideup函数：

import gsap from 'gsap';

const slideup = (container) => {
  // 先固定容器位置，避免滚动干扰动画计算
  gsap.set(container, {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    opacity: 1,
    autoAlpha: 1
  });
  
  const timeline = gsap.timeline();
  const bgColor = container.dataset.bgColor || '#ffffff';
  container.style.backgroundColor = bgColor;

  timeline
    .fromTo(container, { y: window.innerHeight }, { y: 0, duration: 2 })
    .eventCallback('onStart', () => {
      container.classList.add('transition-active');
    })
    .eventCallback('onComplete', () => {
      container.classList.remove('transition-active');
      // 动画完成后恢复容器正常文档流定位
      gsap.set(container, { position: 'static', height: 'auto' });
    });

  return timeline;
};

export default slideup;

5. 添加全局 fallback 过渡 #

确保页面命名空间匹配错误时，仍有过渡效果，避免直接跳转：

barba.init({
  // ...其他配置
  transitions: [
    // 你的home、architecture过渡
    {
      name: 'default',
      leave: ({ current }) => gsap.to(current.container, { opacity: 0, duration: 0.5 }),
      enter: ({ next }) => gsap.from(next.container, { opacity: 0, duration: 0.5 })
    }
  ]
});

内容的提问来源于stack exchange，提问作者jojo