Question

我正在尝试对延迟加载的组件制作动画。波纹管是应用程序模块的代码

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用程序组件ts文件

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { slideInAnimation } from './animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    slideInAnimation
    // animation triggers go here
  ]
})
export class AppComponent {
  title = 'animation';

  prepareRoute(outlet: RouterOutlet) {
    return outlet.activatedRouteData.animation;
  }
}

应用程序组件html文件

<main [@routeAnimations]="prepareRoute(outlet)">
  <nav class="nav nav-pills flex-column flex-sm-row" >
    <a class="flex-sm-fill text-sm-center nav-link " routerLink="/home" routerLinkActive="active">Home</a>
    <a class="flex-sm-fill text-sm-center nav-link " routerLink="/lazy/lazycomponent" routerLinkActive="active">Lazy Component</a>
  </nav>
  <router-outlet #outlet="outlet"></router-outlet>
</main>

应用程序路由模块

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';


const routes: Routes = [
  {path: 'lazy', loadChildren: './lazy-loaded/lazy-loaded.module#LazyLoadedModule'},
  {path: 'home', component: HomeComponent, data: { animation: 'home'}}
];

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

用于延迟加载零件的路由模块

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LazyLoadedComponent } from './lazy-loaded.component';


const routes: Routes = [
  {path: 'lazycomponent', component: LazyLoadedComponent, data: { animation: 'lazy'} }
];

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

动画

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

export const slideInAnimation =
  trigger('routeAnimations', [
    transition(':enter', [
      style({ opacity: 0 }),
      animate('100ms', style({ opacity: 1 })),
    ]),
    transition(':leave', [
      animate('100ms', style({ opacity: 0 }))
    ])
  ]);

您可以在github存储库中找到孔代码： https://github.com/GreyM22/test-animation

动画在延迟加载的组件中不起作用

0 个答案: