我目前正在尝试使用Angular7路由转场动画,遇到以下问题:
在我的应用程序中,有一个入口组件,它有自己的路由模块和
在我的应用程序中,有一个入口组件,它有自己的路由模块和
<router-outlet>
。
我想实现的是,每当路由改变时,旧的显示组件就会淡出(opacity: 0
),然后新的组件淡入。但不幸的是,我似乎无法使它工作。
动画根本没有播放,并且按照Angular文档中所述进行调试:动画转换和触发器。(@routeAnimation.start)="onAnimationEvent($event)"
(@routeAnimation.done)="onAnimationEvent($event)"
这表明动画仅在页面加载时触发一次(甚至无法播放),但在我使用导航器组件浏览应用程序时不会触发。
我的代码如下:
entry.component.ts
@Component({
selector: 'entry',
templateUrl: './entry.component.html',
styleUrls: ['./entry.component.css'],
animations: [routeAnimation],
})
export class EntryComponent implements OnInit {
constructor() { }
ngOnInit() { }
prepareRoute(outlet: RouterOutlet) {
const animation = outlet.activatedRouteData['animation'] || {};
return animation['value'] || 'WelcomePage';
}
}
entry.component.html
<navigator>
</navigator>
<div [@routeAnimation]="prepareRoute(o)" id="entry-content">
<router-outlet #o="outlet" name="entry"></router-outlet>
</div>
entry-routing.module.ts
const routes: Routes = [
{
path: 'entry',
component: EntryComponent,
children: [
{
path: '',
component: WelcomeComponent,
outlet: 'entry',
data: { animation: 'WelcomePage' }
},
{
path: 'introduction',
component: IntroductionComponent,
outlet: 'entry',
data: { animation: 'IntroductionPage' }
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class EntryRoutingModule { }
route.animation.ts
export const routeAnimation = trigger(
'routeAnimation', [
transition('* => *', [
group([
query(':enter', style({ opacity: 0 })),
query(':leave', [
animate('0.5s', style({ opacity: 0 })),
style({ display: 'none' })
], { optional: true }),
query(':enter', [
animate('2s',
style({ opacity: 1 })),
animateChild()
], { optional: true })
])
]),
]
);
有什么遗漏或者我做错了什么吗? 非常感谢您的帮助,提前致谢!