没有上一条路线时的转移表达式

Question

我一直在研究 angular 动画，最近遇到了一个我似乎无法解决的问题。转换表达式对于从路线 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 和 :decrement 修复了它，它们不是使用直接 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}
            )
        ])
    ])
]);

没有上一条路线时的转移表达式

Transition expression when there is no previous route

animation

router

transition

angular