web-dev-qa-db-ja.com

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

これは、ページ遷移が2つのステップ（順次）で発生することを除いて、うまく機能します。

  1. page1が消える（300ミリ秒）
  2. そして、page2が表示されます（300ミリ秒）

私が欲しいのは、page1の消失は、page2が表示されるのと同時に発生し、遷移は同時に発生する必要があるということです。

問題：

Page1またはpage2のコンテンツの一時的なサイズ変更を防ぎたい。

説明：

Group（）でアニメーション化して表示させる場合は、同時に非表示にし、位置を一時的に「絶対」に設定すると、コンテンツのサイズが変更されます（コンテンツの幅が100％であり、コンテナーのサイズが変更されると、コンテンツも変更されます）。

私はz-indexで遊んでみました：

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

しかし、それはうまくいきませんでした、それはまだページを出る下に入るページを積み重ねています。

これに対する良い解決策はありますか？

cssangularangular-animations
6
Wolf359

私はついにそれを機能させました：

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

この単純な移行を試してください。

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