Angular 路由器动画角5上下一个元素的高度

我使用此处描述的路线动画作为参考：

从“@angular/animations”导入{触发器、动画、样式、组、动画胶片、查询、交错、过渡}；
export const routerTransition=触发器（'routerTransition'[
转换（'**'[
/*命令*/
/*1*/query（':enter，：leave'，style（{position:'fixed'，width:'100%}），{optional:true}），
/*2*/group（[//块并行执行
查询（“：输入”[
样式（{transform:'translateX（100%）'）），
动画（'1s ease in out'，样式（{transform:'translateX（0%）'））
]，{可选：true}），
查询（':leave'[
样式（{transform:'translateX（0%）'）），
动画（'1s ease in out'，样式（{transform:'translateX（-100%）}））
]，{可选：true}），
])
])
]);

动画本身的作品，除了在我的网页我有一个绝对的页脚，这是保持在底部的内容。当动画结束时，页脚将进行调整，但我希望它在动画发生时发生。我可以看到屏幕上显示的

ng动画

元素，但我认为我不需要对它做任何事情。我读过关于高度：'*'的文章，但是放置它不起作用

注意，只要我不在动画的中间，应用程序的高度、填充等就可以正常工作。从开始到结束，高度都会出错。就像动画本身被放置在其他地方，而不尊重实际的样式

所以我的问题是：当动画发生时，我如何保持绝对页脚在屏幕底部

---

谢谢

页脚在路由器出口外面吗？是的，页脚在indeedAfaik外面，需要将视图设置为绝对视图，请参阅本节-

import {trigger, animate, style, group, animateChild, query, stagger, transition} from '@angular/animations';

export const routerTransition = trigger('routerTransition', [
    transition('* <=> *', [
    /* order */
    /* 1 */ query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
    /* 2 */ group([  // block executes in parallel
                query(':enter', [
                    style({ transform: 'translateX(100%)'}),
                    animate('1s ease-in-out', style({ transform: 'translateX(0%)' }))
                ], { optional: true }),
                query(':leave', [
                    style({ transform: 'translateX(0%)' }),
                    animate('1s ease-in-out', style({ transform: 'translateX(-100%)' }))
                ], { optional: true }),
            ])
    ])
]);