Question

我正在尝试在Ionic App中将路由器动画添加到几个路由中。由于嵌套的复杂性（3级嵌套），Ionic内置解决方案ion-router具有不稳定的行为。

因此，第一级如下

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

所有这一切都说明，从Home到Auth可以正常工作，反之亦然，但是其他对象（如Main到Item），虽然在受影响的HTML上有些闪烁，但DOM上在视觉上没有发生任何变化。如果增加过渡时间，两条路线会在DOM中短暂出现，但没有视觉效果

我尝试遵循此presentation，该问题似乎涵盖了所有内容，但我不知道自己缺少什么。我也尝试过此blitz，但没有效果。

角嵌套式路由器插座动画

0 个答案: