我使用 Angular8 开发了一个应用程序，我想在其中添加一些动画，但我实现的动画不起作用，甚至没有显示一些错误消息。例如，在 我想有一个幻灯片效果。
这是我的代码：
app.component.html
<body class="hold-transition sidebar-mini layout-fixed">
<app-nav></app-nav>
<app-aside></app-aside>
<div class="content-wrapper ">
<app-breadcrumb></app-breadcrumb>
<main [@routerTransition]="getState(o)">
<div class="card m-3">
<div class="card-body">
<router-outlet #o="outlet"></router-outlet>
</div>
</div>
</main>
<app-dialog> </app-dialog>
</div>
<app-footer></app-footer>
</body>
app.component.ts
import { Component, OnInit } from '@angular/core';
import { routerTransition } from 'src/app/app.component.animation';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
animations: [routerTransition],
})
export class AppComponent implements OnInit {
title = 'app';
constructor(
) { }
OnInit(){}
getState(outlet) {
return outlet.activatedRouteData.state;
}
}
app.component.animation
import { trigger, animate, style, group, animateChild, query, stagger, transition } from '@angular/animations';
export const routerTransition = trigger('routerTransition', [
transition('* <=> *', [
/* order */
/* 1 */ query(':enter, :leave', style({ position: 'fixed', width: '100%' })
, { optional: true }),
/* 2 */ group([ // block executes in parallel
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.module.ts的导入中添加了浏览器动画模块
还想问如何在应用程序面包屑上添加不同的动画，例如 fadeIn？
谢谢你的时间！ 此致敬意
应将数据传递到路由以进行激活转换。 喜欢这个：
const routes: Routes = [
{ path: 'home', component: HomeComponent, data: { state: 'home'} },
...
如果您使用的是延迟加载，则必须使用页面路由器和相同的数据结构制作单独的文件，就像在主应用程序中一样。然后在里面加载组件。 例：
import { Component } from '@angular/core';
import { routerTransition } from '../app.animation';
@Component({
selector: 'lazy',
template: `
<div [@routerTransition]="getState(o)">
<router-outlet #o="outlet"></router-outlet>
</div>
`,
animations: [ routerTransition ]
})
export class LazyComponent {
getState(outlet) {
return outlet.activatedRouteData.state;
}
}