Angular路由切换动画移动端因组件高度差出现跳动问题求助

问题分析 #

路由切换时出现跳动，核心原因是新旧组件高度不一致，导致包含router-outlet的.outlet容器高度在动画过程中突变，带动header/footer移位。移动设备视口空间有限，布局重排的视觉感知会更明显。

修复方案 #

1. 稳定容器高度，避免布局重排 #

给容器添加明确的高度约束，确保父级容器占满视口，同时固定header和footer的高度，避免flex布局挤压导致的尺寸变化。

2. 调整动画样式，强制新旧组件占满容器 #

修改动画逻辑，让进入/离开的组件继承容器高度，避免因组件自身高度差异引发的跳动。

3. 优化flex布局稳定性 #

通过flex-shrink:0固定header和footer的高度，确保动画期间flex容器的布局规则不发生变化。

修改后的代码 #

HTML（无需改动） #

<div class="container">
<header class="header">
</header>

<div class="outlet" [@routeAnimations]="prepareRoute(outlet)">
    <router-outlet #outlet="outlet">
    </router-outlet>
</div>

<footer class="footer">
</footer>
</div>

CSS（新增全局高度约束+优化布局） #

/* 全局高度约束，确保容器能占满视口 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100vh; /* 使用vh确保占满视口高度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .header {
    width: 100%;
    flex-shrink: 0; /* 固定header高度，不被flex挤压 */
  }

  .outlet {
    flex: 1;
    position: relative;
    overflow-y: auto; /* 内容超出时内部滚动，避免容器高度变化 */
    width: 100%;
    min-height: 0; /* 修复flex子元素高度溢出问题 */
  }

  .footer {
    width: 100%;
    margin-left: 52px;
    flex-shrink: 0; /* 固定footer高度，不被flex挤压 */
  }
}

@media (max-width: 800px) {
  .container {
    .footer {
      margin-left: 6px;
    }
  }
}

TypeScript（无需改动） #

export class AuthOutletComponent implements OnInit {

  constructor(private loaderScreenService: LoaderScreenService) { }

  ngOnInit(): void {
    this.loaderScreenService.hide();
  }

  prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData;
  }

}

动画配置（修改高度规则+修正拼写错误） #

export const authRouteAnimations =
  trigger('routeAnimations', [
    transition('* <=> *', authFadeInFadeOut()),
  ]);

function authFadeInFadeOut() {
  const optional = { optional: true };

  return [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0, /* 修正原代码typo：pop改为top */
        left: 0,
        width: '100%',
        height: '100%', /* 改为100%，强制继承容器高度 */
        overflow-y: auto, /* 组件内部内容滚动 */
      })
    ], optional),
    query(':enter', [
      style({opacity: 0 })
    ], optional),
    query(':leave', [
      style({ left: 0, opacity: 1 })
    ], optional),
    group([
      query(':leave', [
        animate('800ms ease', style({ left: '+30%', opacity: 0 }))
      ], optional),
      query(':enter', [
        animate('800ms 550ms ease', style({ opacity: 1 }))
      ], optional)
    ]),
  ];
}

关键修改点说明 #

• 给html, body和.container添加高度约束，确保容器高度稳定
• 给header和footer添加flex-shrink:0，避免flex布局挤压它们的高度
• 动画中把组件height从auto改为100%，强制新旧组件和.outlet容器高度一致
• 修正动画代码中的pop拼写错误为top，避免样式失效
• 给.outlet添加overflow-y: auto，组件内容超出时内部滚动，不改变容器高度

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