我想我已经连接了基本的动画部分，我只需要知道要处理哪些事件。理想情况下，我想要一个可以在导航级别使用的解决方案，这样我就可以包装我的所有组件，但是一个简单的页面加载示例就足够了，非常感谢。我在 SO 上发现了其他几个相关的问题，但它们似乎没有回答我的具体问题或已过时：
Angular 2 路由组件的“幻灯片动画” 带有 Angular 2.0 路由器和组件接口承诺的页面过渡动画
到目前为止，这是我所拥有的：
.html 文件
<article @heroState="componentState">
<p>article element should fade in/out</p>
</article>
零件
@Component({
selector: 'blog-about',
templateUrl: './app/about/about.html',
animations: [
trigger('heroState', [
state('active', style({
backgroundColor: 'blue',
transform: 'scale(1)'
})),
state('inactive', style({
backgroundColor: 'green',
transform: 'scale(1.1)'
})),
transition('active => inactive', animate('1000ms ease-in')),
transition('inactive => active', animate('1000ms ease-out'))
])
]
})
export class About implements OnInit, OnDestroy {
public componentState: string;
public Title: string
constructor() {
this.Title = "this is about";
}
ngOnInit()
{
this.componentState = 'inactive';
}
ngOnDestroy()
{
}
}