没有先前路由时的转换表达式

Question

我一直在玩角度动画，我最近遇到了一个我似乎无法解决的问题。转换表达式非常有用，从路径A到路由B，或从路由到路由A等等。但是当我从无到有转换到路由A时，我似乎无法找到所需的表达式。例如，如果我的用户直接使用URL访问路由B而不是通过路径A.我想要一个不同的动画，当用户不通过路径A（使用直接URL到路由B）时可以说淡入淡出但是当时滑动他正在通过正常的流量（A => B）。

我尝试过使用'void => *'和'=> *'，但两者都无效。

routerTransition

    trigger('routerTransition', [
        transition('=> *, Loading => *', [
            query(':enter, :leave', style({ position: 'fixed', width:'100%', height: '100%' }), {optional: true}),
            group([
                query(
                    ':enter',
                    [
                        style({opacity: 0}),
                        animate('300ms', style({opacity: 1}))
                    ],
                    {optional: true}
                ),
                query(
                    ':leave',
                    [
                        style({opacity: 1}),
                        animate('300ms', style({opacity: 0}))
                    ],
                    {optional: true}
                )
            ])
        ]),
        transition('* => Login', [
            query(':enter, :leave', style({ position: 'fixed', width:'100%', height: '100%' }), {optional: true}),
            group([
                query(
                    ':enter',
                    [
                        style({transform: 'translateX(-100%)'}),
                        animate('300ms ease-in', style({transform: 'translateX(0)'}))
                    ],
                    {optional: true}
                ),
                query(
                    ':leave',
                    [
                        style({transform: 'translateX(0)'}),
                        animate('300ms ease-in', style({transform: 'translateX(100%)'}))
                    ],
                    {optional: true}
                )
            ])
        ]),
        transition('* <=> *', [
            query(':enter, :leave', style({ position: 'fixed', width:'100%', height: '100%' }), {optional: true}),
            group([
                query(
                    ':enter',
                    [
                        style({transform: 'translateX(100%)'}),
                        animate('300ms ease-in', style({transform: 'translateX(0)'}))
                    ],
                    {optional: true}
                ),
                query(
                    ':leave',
                    [
                        style({transform: 'translateX(0)'}),
                        animate('300ms ease-in', style({transform: 'translateX(-100%)'}))
                    ],
                    {optional: true}
                )
            ])
        ])
    ]);

app.component.html

<div [@routerTransition]="animatedRoute(outlet)" class="router">
    <router-outlet #outlet="outlet"></router-outlet>
</div>

提前致谢 ！

Answer 1

我使用以下方法修复它：increment和：使用直接url调用的减量。看起来像这样。

const routes: Routes = [
    {path: '', component: LoadingComponent, pathMatch: 'full', data: {i: -1}},
    {path: 'login', component: LoginComponent, data: {i: 0}},

    {path: 'client/:client/panel', component: ClientPanelComponent, canActivate: [AuthGuard], data: {i: 1}}
];

export const routerAnimation = trigger('routerTransition', [
    transition('-1 => *', [
        query(':enter, :leave', style({ position: 'fixed', width:'100%', height: '100%' }), {optional: true}),
        group([
            query(
                ':enter',
                [
                    style({opacity: 0}),
                    animate('300ms', style({opacity: 1}))
                ],
                {optional: true}
            ),
            query(
                ':leave',
                [
                    style({opacity: 1}),
                    animate('300ms', style({opacity: 0}))
                ],
                {optional: true}
            )
        ])
    ]),
    transition(':decrement', [
        query(':enter, :leave', style({ position: 'fixed', width:'100%', height: '100%' }), {optional: true}),
        group([
            query(
                ':enter',
                [
                    style({transform: 'translateX(-100%)'}),
                    animate('300ms ease-in', style({transform: 'translateX(0)'}))
                ],
                {optional: true}
            ),
            query(
                ':leave',
                [
                    style({transform: 'translateX(0)'}),
                    animate('300ms ease-in', style({transform: 'translateX(100%)'}))
                ],
                {optional: true}
            )
        ])
    ]),
    transition(':increment', [
        query(':enter, :leave', style({ position: 'fixed', width:'100%', height: '100%' }), {optional: true}),
        group([
            query(
                ':enter',
                [
                    style({transform: 'translateX(100%)'}),
                    animate('300ms ease-in', style({transform: 'translateX(0)'}))
                ],
                {optional: true}
            ),
            query(
                ':leave',
                [
                    style({transform: 'translateX(0)'}),
                    animate('300ms ease-in', style({transform: 'translateX(-100%)'}))
                ],
                {optional: true}
            )
        ])
    ]),
    transition('* <=> *', [
        query(':enter, :leave', style({ position: 'fixed', width:'100%', height: '100%' }), {optional: true}),
        group([
            query(
                ':enter',
                [
                    style({opacity: 0}),
                    animate('300ms', style({opacity: 1}))
                ],
                {optional: true}
            ),
            query(
                ':leave',
                [
                    style({opacity: 1}),
                    animate('300ms', style({opacity: 0}))
                ],
                {optional: true}
            )
        ])
    ])
]);