Highway页面过渡实现报错：Uncaught TypeError无法读取null的getAttribute

这个错误的核心原因是Highway找不到它运行所需的DOM标记，初始化时无法获取带有data-router属性的元素，导致后续调用getAttribute时触发null报错。

第一步：修复HTML结构（最可能的解决方法） #

Highway要求页面必须包含两个关键DOM属性：

• 根容器：带有data-router属性，作为Highway的作用范围
• 可替换视图：带有data-router-view属性，用于页面过渡时替换内容

确保你的每个页面都有类似结构：

<!-- 根容器 -->
<div data-router>
  <!-- 固定内容（比如导航栏，不需要过渡） -->
  <header>导航栏</header>
  
  <!-- 可过渡的视图内容 -->
  <main data-router-view>
    <!-- 当前页面的具体内容 -->
  </main>
  
  <!-- 固定内容（比如页脚） -->
  <footer>页脚</footer>
</div>

如果缺少data-router容器，Highway初始化时会直接抛出你遇到的错误。

第二步：验证依赖与版本匹配 #

1. 确认安装的Highway版本和教程一致：
   • 查看教程使用的版本，v2.x和v3.x的API存在差异，若教程用v2，不要安装v3
   • 执行npm list @dogstudio/highway查看当前版本，必要时回退：

     npm install @dogstudio/highway@2.3.3 # 替换为教程对应的版本号
     

2. 确保GSAP依赖正确安装：

   npm install gsap --save
   

   新版GSAP的导入方式需要调整，修改transition.js中的代码：

   import Highway from '@dogstudio/highway';
   import { gsap } from 'gsap';
   
   class Fade extends Highway.Transition {
       in({from,to,done}) {
           from.remove();
           gsap.fromTo(to, 0.5, {opacity:0}, {opacity:1, onComplete: done})
       }
       out({from, done}) {
           done();
       }
   }
   
   export default Fade;
   

第三步：调整Transition逻辑（可选优化） #

你的in方法中直接调用from.remove()可能导致布局闪烁，建议在动画完成后再移除旧内容：

in({ from, to, done }) {
  gsap.set(from, { opacity: 0 });
  gsap.fromTo(to, 0.5, { opacity: 0 }, { 
    opacity: 1, 
    onComplete: () => {
      from.remove();
      done();
    }
  });
}

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