Angular Анимация вложенных маршрутизаторов - PullRequest
Новая
       29

Angular Анимация вложенных маршрутизаторов

0 голосов
/ 21 января 2020

Я пытаюсь добавить анимацию маршрутизатора к паре маршрутов в моем приложении Ioni c. Из-за сложности вложенности (3 уровня вложенности) встроенное решение Ioni c ion-router имеет ошибки c.

Таким образом, первый уровень следует как таковой 

const routes: Routes = [
  {path: '', redirectTo: 'splash', pathMatch: 'full' },
  {path: 'splash', loadChildren: () => import('./pages/splash/splash.module').then(m => m.SplashPageModule)},
  {path: 'home', loadChildren: () => import('./pages/home/home.module').then(m => m.HomePageModule), data: {animation: 'Home'}},
  {path: 'auth', loadChildren: () => import('./pages/auth/auth.module').then(m => m.AuthPageModule), data: {animation: 'Auth'}},
];

И app.component. html

<ion-app>
  <div [@routeAnimations]="outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation']">
    <router-outlet #outlet="outlet"></router-outlet>
</div>
</ion-app>

Если мы следуем /home, у нас есть эти маршруты 

const routes: Routes = [
  {
    path: '',
    component: HomePage,
    children: [
      {path: '', redirectTo: 'main', pathMatch: 'full' },
      {path: 'agenda', loadChildren: () => import('./home-agenda/home-agenda.module').then(m => m.HomeAgendaPageModule), data: {animation: 'Agenda'} },
      {path: 'main', loadChildren: () => import('./home-main/home-main.module').then(m => m.HomeMainPageModule), data: {animation: 'Main'} },
      {path: 'profile', loadChildren: () => import('./home-profile/home-profile.module').then(m => m.HomeProfilePageModule) },
      {path: 'item/:itemType/:id/:hour', loadChildren: () => import('../item/item.module').then(m => m.ItemPageModule)},
      {path: 'item/:itemType/:id', loadChildren: () => import('../item/item.module').then(m => m.ItemPageModule), data: {animation: 'Item'} },
    ]
  }
];

И это выход 

<div [@routeAnimations]="outlet2 && outlet2.activatedRouteData && outlet2.activatedRouteData['animation']">
    <router-outlet #outlet2="outlet" class="home"></router-outlet>
</div>

анимации определены здесь 

export const slideInAnimation = trigger('routeAnimations', [
    transition('Auth => Home', [
        query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
        group([
            query(':enter', [
                style({ transform: 'translateX(-100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' })),
                animateChild()
            ], { optional: true }),
            query(':leave', [
                style({ transform: 'translateX(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' })),
                animateChild()
            ], { optional: true }),
        ])
    ]),
    // transition('Main <=> Agenda', [
    //     query(':enter, :leave', style({ position: 'fixed', width: '100%', backgroundColor: 'gold' }), { optional: true }),
    //     group([
    //         query(':enter', [
    //             style({ transform: 'translateX(-100%)' }),
    //             animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' })),
    //             animateChild()
    //         ], { optional: true }),
    //         query(':leave', [
    //             style({ transform: 'translateX(0%)' }),
    //             animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' })),
    //             animateChild()
    //         ], { optional: true }),
    //     ])
    // ]),
    transition('Home => Auth', [
        query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
        group([
            query(':enter', [
                style({ transform: 'translateX(100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
            ], { optional: true }),
            query(':leave', [
                style({ transform: 'translateX(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
            ], { optional: true }),
        ])
    ]),
]);

Все это говорит о том, что From Home to Auth работает нормально и наоборот, но другие, такие как Main to Item, на DOM визуально ничего не происходит, хотя есть некоторые мигания через затронутые HTML. Если я увеличу время перехода, два маршрута появятся на короткое время в DOM, но без визуального эффекта

Я попытался следовать этой презентации , которая, кажется, охватывает все, но я не знаю, что я пропал. Я также попробовал это блиц , но без эффекта.

...