Angular 5：路由过程中的淡入淡出动画(CSS)

我有2条路线：

export const appRoutes: Route[] = [
{
                path: 'page1',component: Page1Component,data: {
                    animation: 'page1'
                }
            },{
                path: 'page2',component: Page2Component,data: {
                    animation: 'page2'
                }
            },];

我的路线动画：

export const routeStateTrigger = trigger('routeState',[
    transition('* => *',[
        query(':enter',[
            style({ position: 'absolute',opacity: 0 })
        ],{ optional: true }),query(':leave',[
            animate(300,style({ opacity: 0 }))
        ],query(':enter',[
            style({ position: 'relative',opacity: 0 }),animate(300,style({ display: 'visible',opacity: 1 }))
        ],{ optional: true })
    ])
]);

我的路由器插座：

<div [@routeState]="getAnimationData(routerOutlet)">
    <router-outlet #routerOutlet="outlet"></router-outlet>
</div>

和getAnimationData方法：

getAnimationData(routerOutlet: RouterOutlet) {
    const routeData = routerOutlet.activatedRouteData['animation'];
    return routeData ? routeData : 'rootPage';
}

这很有效,除了页面转换分两步发生(顺序)：

> page1消失(300毫秒)
> AND THEN page2出现(300毫秒)

我想要的是page1的消失应该在page2出现的同时发生,转换应该同时发生.

问题：

我想阻止page1或page2的内容的TEMPORARY RESIZING.

说明：

当使用group()进行动画制作以使它们同时消失并将位置暂时设置为“绝对”时,内容会调整大小(因为内容宽度为100％,当容器大小更改时内容也会发生变化).

我试过玩z-index：

position: 'relative','z-index': 1

但这不起作用,它仍在堆叠进入页面下面的页面.

有一个很好的解决方案吗？

解决方法

尝试这个简单的过渡.

export const routeStateTrigger =
  // trigger name for attaching this animation to an element using the [@triggerName] Syntax
  trigger('routeState',[

    // route 'enter and leave (<=>)' transition
    transition('*<=>*',[

      // css styles at start of transition
      style({ opacity: 0 }),// animation and styles at end of transition
      animate('0.4s',style({ opacity: 1 }))
    ]),]);