Question

我正在使用此处描述的路线动画作为参考： https://medium.com/google-developer-experts/angular-supercharge-your-router-transitions-using-new-animation-features-v4-3-3eb341ede6c8

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 }),
            ])
    ])
]);

动画本身有效，除了在我的页面中我有一个保留在内容底部的绝对页脚。当动画结束然后页脚调整但是我希望它在动画发生时发生。我可以看到屏幕上显示ng-animating元素但我不认为我必须对它做任何事情。我已经阅读了height: '*'，但放置它不起作用。

请注意，只要我不在动画中间，应用程序高度，填充等就能正常工作。从开始到结束，高度出错。就像动画本身被放置在其他地方并且不尊重实际风格。

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

由于

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

0 个答案: