angular - 没有先前路线时的转移表达式

Question

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

我试过使用 'void => *' 和 '=> *' 但两者都不起作用。

路由器转换

    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>

提前致谢 ！

标签： angularanimationtransitionrouter

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