Angular路由slideInOutAnimation动画结束后设置position为relative方法

现有如下Angular路由滑动进出动画代码，动画本身可以正常生效：

export const slideInOutAnimation =
  trigger('slideInOutAnimation', [
    state('*', style({
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    })),

    transition(':enter', [
      style({
        right: '-400%',
      }),
      animate('.5s ease-in-out', style({
        position: 'relative !important' ,
        right: 0,
      })),
    ]),

    transition(':leave', [
      animate('.5s ease-in-out',
        style({
          right: '-400%',
          position: 'relative'
        }))
    ]),
  ]);

由于通配状态*下配置了position: fixed固定定位样式，导致页面滚动条无法正常显示。尝试多种动画编写方式，始终无法实现动画执行完成后自动将元素position属性修改为relative的效果。

问题核心原因有两点：

• Angular动画API不支持在style()配置中写!important标记，该写法不会被解析生效
• 通配状态*是元素动画结束后停留的稳定状态，只要没有匹配到其他命名状态，动画执行完成后都会回退应用该状态下的所有样式，所以只要在*状态写了position: fixed，动画结束后元素永远会被固定定位。

修正后的动画代码如下：

export const slideInOutAnimation =
  trigger('slideInOutAnimation', [
    // 定义所有稳定状态的基础样式，动画结束后自动回落为relative，保证滚动条正常显示
    state('void', style({ position: 'relative' })),
    state('*', style({ position: 'relative' })),

    transition(':enter', [
      // 仅入场动画启动瞬间应用fixed定位，保证滑动过程不挤占文档流位置、不出现布局跳动
      style({
        position: 'fixed',
        top: 0,
        left: 0,
        right: '-400%',
        bottom: 0,
      }),
      // 执行滑入动画，动画完成后Angular会自动清理动画阶段的临时内联样式，回落至*状态的relative定位
      animate('.5s ease-in-out', style({
        right: 0,
      })),
    ]),

    transition(':leave', [
      // 离场动画启动瞬间临时应用fixed定位，避免离场过程中页面布局偏移
      style({
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
      }),
      // 执行滑出动画，动画完成后元素从DOM中移除，不会残留固定定位影响页面滚动
      animate('.5s ease-in-out', style({
        right: '-400%',
      }))
    ]),
  ]);

关键实现逻辑说明：

• 把position: fixed配置从稳定的state定义中移除，仅放在transition的初始样式块中，让固定定位仅在动画执行阶段生效
• 稳定状态下统一配置position: relative，动画执行完成后Angular会自动清理动画阶段添加的临时样式，无需手动写DOM操作逻辑修改定位属性
• 移除所有动画样式里的!important标记，遵循Angular动画的API规则即可。

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