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

没有上一条路线时的过渡表达式

1 个答案: