添加路由器动画后角度路由器出口高度不正确

Question

我正在尝试为我的角度项目添加路由器动画，我已经添加了一个动画但是为了动画需要工作我正在为路由器出口标签内的选择器添加绝对位置。

这造成了问题，插座内的组件没有占据它的全部内容高度并从底部被切碎。

动画

export const routerAnimation = trigger('routerAnimation', [
    transition('* => *', [
        query(':enter', [style({ opacity: 0 })], { optional: true }),
        group([
            query(':leave', [animate(300, style({ opacity: 0 }))], {
                optional: true
            }),
            query(
                ':enter',
                [style({ opacity: 0 }), animate(300, style({ opacity: 1 }))],
                { optional: true }
            )
        ])
    ])
]);

HTML 布局

<div class="admin-layout-outer">
    <admin-header></admin-header>
    <admin-sidebar></admin-sidebar>
    <div class="admin-layout-inner">
        <ng-scrollbar
            [visibility]="'hover'"
            [appearance]="'compact'"
            [autoHeightDisabled]="false"
            [viewClass]="'custom-scrollbar'"
            [pointerEventsMethod]="'scrollbar'"
            [trackClass]="'custom-scrollbar-track'"
            [thumbClass]="'custom-scrollbar-thumb'"
        >
            <div
                class="admin-layout-content"
                [@routerAnimation]="
                    adminLayout.isActivated ? adminLayout.activatedRoute : ''
                "
            >
                <router-outlet #adminLayout="outlet"></router-outlet>
            </div>
        </ng-scrollbar>
    </div>
</div>

布局 CSS

.admin-layout-outer {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: var(--white);
}
.admin-layout-inner {
    width: 100vw;
    height: 100vh;
    position: relative;
    padding-top: 70px;
    padding-left: 225px;
}
.admin-layout-content {
    width: auto;
    margin: 30px;
    position: relative;
    min-height: calc(100vh - 130px);
}
::ng-deep .admin-layout-content > :last-child {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

Answer 1

查看文档中的示例

看动画像

trigger('routeAnimations', [
    transition('*<=> *', [

      //you should include this
      style({ position: 'relative' }),
      query(':enter, :leave', [
        style({
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%'
      })
      ], { optional: true }),

      //now you add your query enter
      query(':enter', [...])

      //interesting you can add leave animateChild
      query(':leave', animateChild(), { optional: true }),

      //here your animation group
      group([...your group animation...])
 ]);