Выражение перехода при отсутствии предыдущего маршрута - PullRequest
Новая
       17

Выражение перехода при отсутствии предыдущего маршрута

0 голосов
/ 26 апреля 2019

Я играл с угловой анимацией, и недавно я столкнулся с проблемой, которую не могу решить.Выражения перехода очень полезны для перехода от маршрута A к маршруту B или от любого маршрута к маршруту A и т. Д. Однако я не могу найти нужного выражения при переходе от ничего к маршруту A. Например, еслимой маршрут доступа пользователя B с URL-адресом напрямую, а не через маршрут 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>

Заранее спасибо!

1 Ответ

0 голосов
/ 29 апреля 2019

Я исправил это с помощью: приращения и: уменьшения, которые не вызывались при использовании прямого 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}
            )
        ])
    ])
]);
...