Angular 5:路由期间的淡入淡出动画(CSS) [英] Angular 5: fade animation during routing (CSS)

问题描述

我有两条路线:

export const appRoutes: Route[] = [{路径:'第1页'，组件:Page1Component，数据: {动画:'page1'}},{路径:'第2页'，组件:Page2Component，数据: {动画:'page2'}},];

我的路线动画:

export const routeStateTrigger = trigger('routeState', [过渡('* => *'，[查询(':输入'，[样式({位置:'绝对'，不透明度:0})], { 可选: 真 }),查询(':离开'，[动画(300，样式({不透明度:0}))], { 可选: 真 }),查询(':输入'，[样式({位置:'相对'，不透明度:0})，动画(300，样式({显示:'可见'，不透明度:1}))], { 可选:true })])]);

我的路由器插座:

<router-outlet #routerOutlet="outlet"></router-outlet>

和 getAnimationData 方法:

getAnimationData(routerOutlet: RouterOutlet) {const routeData = routerOutlet.activatedRouteData['animation'];返回路由数据?路由数据:'rootPage';}

这很有效，除了页面转换发生在两个步骤中(顺序):

1. page1 消失(300 毫秒)
2. 然后第 2 页出现(300 毫秒)

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

问题:

我想防止对 page1 或 page2 的内容进行临时调整.

说明:

当使用 group() 动画使它们同时出现-消失并将位置临时设置为绝对"时，内容将调整大小(因为内容宽度为 100%，并且当容器大小更改时，内容也会更改).

我试过玩 z-index :

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

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

有什么好的解决办法吗?

解决方案

我终于成功了:

export const routeStateTrigger = trigger('routeState', [过渡('* => *'，[查询(':输入'，[样式({不透明度:0})], { 可选:真}),团体([查询(':离开'，[动画(300，样式({不透明度:0}))],{ 可选:真}),查询(':输入'，[样式({不透明度:0})，动画(300，样式({不透明度:1}))],{ 可选:真})])])]);

这个 CSS 选择器成功了:

/deep/router-outlet~* {位置:绝对；宽度:100%；高度:100%；}

I have 2 routes :

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

My Route animation :

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

My router-outlet :

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

and getAnimationData method :

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

This works well, except page transition occurs in two steps (sequential) :

1. page1 disappears (300 ms)
2. AND THEN page2 appears (300 ms)

What I want is the disappearing of page1 should happen the same time page2 appears, the transitions should occur simultaneously.

Problem :

I want to prevent the TEMPORARY RESIZING of the content of page1 or page2.

Explanation :

When animating with group() to make them appear-disappear simultaneously AND setting the position temporarily to 'absolute' then the content resizes (because the content is width 100%, and when the container size changes the content changes as well).

I've tried playing with z-index :

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

but that didn't work, it's still stacking entering page below leaving page.

Is there a good solution to this ?

解决方案

I finally made it work :

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

This CSS selector did the trick :

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

这篇关于Angular 5:路由期间的淡入淡出动画(CSS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！