javascript - 为什么我在 Angular 8 中的路由器动画不起作用？

Question

所以我使用本教程作为指南来让我的路线动画化。我没有收到任何错误，但它根本不会动画，我无法弄清楚我错过了什么。我敢肯定它一定是非常小的东西！期待您的输入。

这body.component.html，这就是我router-outlet应该在的地方，在它的.ts文件中我也导入了我的动画配置import { slideInAnimation } from '../route-animation';

<section [@routeAnimations]="o && o.activatedRouteData
      && o.activatedRouteData['animation']" class="app-body" [class.nav--open]="menu.isMenuClosed">
  <router-outlet #o="outlet"></router-outlet>
</section>

下面我的route-animation.ts

import {
    transition,
    trigger,
    query,
    style,
    animate,
    group,
    animateChild
} from '@angular/animations';


export const slideInAnimation =
    trigger('routeAnimations', [
        transition('* => *', [
            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 }),
            ])
        ]),
    ]);

最后我的app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutSectionComponent } from './body/about-section/about-section.component';
import { ToursSectionComponent } from './body/tours-section/tours-section.component';
import { GallerySectionComponent } from './body/gallery-section/gallery-section.component';
import { ContactSectionComponent } from './body/contact-section/contact-section.component';
import { IndexSectionComponent } from './body/index-section/index-section.component';


const routes: Routes = [
  { path: '', component: IndexSectionComponent},
  { path: 'about', component: AboutSectionComponent, data: {animation: 'About'}},
  { path: 'tours', component: ToursSectionComponent, data: {animation: 'Tours'}},
  { path: 'gallery', component: GallerySectionComponent, data: {animation: 'Gallery'}},
  { path: 'contact', component: ContactSectionComponent, data: {animation: 'Contact'}},
  { path: 'index', component: IndexSectionComponent, data: {animation: 'Index'}}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

标签： javascripthtmlangularangular8