Angular 5：路由期间的淡入淡出动画（CSS）

Question

我有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 }))
        ], { optional: true }),
        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';
}

这很好，除了页面转换是分两个步骤进行（顺序）：

1. 第1页消失（300毫秒）
2. 然后出现第2页（300毫秒）

我想要的是page1的消失应该在page2出现的同时发生，过渡应该同时发生。

问题：

我想防止页面1或页面2的内容的临时大小调整。

说明：

[使用group（）设置动画以使其同时消失时，并将位置临时设置为“绝对”，然后调整内容大小（因为内容宽度为100％，并且当容器尺寸更改时，内容也随之更改）。

我尝试过使用z-index：

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

但是那没有用，它仍然在进入页面堆叠在离开页面之下。

对此是否有好的解决方案？

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

Answer 2

我终于使它起作用了：

export const routeStateTrigger = trigger('routeState', [
    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 }
            )
        ])
    ])
]);

此CSS选择器完成了技巧：

/deep/ router-outlet~* {
    position: absolute;
    width: 100%;
    height: 100%;
}

Answer 3

因为我使用的是页脚，所以绝对位置绝对不理想。这是我所做的：

// animation.ts
export const fadeAnimation =

  trigger('fadeAnimation', [

    transition('* => *', [

      query(':enter',
        [
          /* Modified the css here so to push the new element on top while its transitioning */
          style({opacity: 0, position: 'absolute', top: 0, left: 0, width: '100vw', background:'#fff', height: '100vh', 'z-index' : 10})
        ],
        {optional: true}
      ),

      query(':leave',
        [
          style({opacity: 1}),
          animate('0.5s', style({opacity: 0}))
        ],
        {optional: true}
      ),

      query(':enter',
        [
          style({opacity: 0}),
          animate('0.5s', style({opacity: 1}))
        ],
        {optional: true}
      )

    ])

  ]);

// mystyle.scsss
:host {

  main {
    position: relative;
  }

}