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. page1消失(300毫秒)
2. 然后出现第2页(300毫秒)

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

问题:

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

说明:

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

我试过玩z-index:

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

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

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

Answer 1

我仅使用 CSS 在路由过程中创建淡入淡出动画，如下所示：

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

router-outlet + * {
  display: block;  /* Change display inline to block */
  animation: fade 1s;
}

注意：我使用的是全局风格，你可以使用更多的类来隔离。

Answer 2

尝试这个简单的过渡。

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 3

我终于让它工作了：

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%;
}