angular – 如何在加载/卸载时在页面上实现淡入/淡出效果？

我想我已经连接了基本的动画部分,我只需要知道要处理的事件.理想情况下,我想要一个我可以在导航级别使用的解决方案,所以我可以包装我的所有组件,但一个简单的页面加载示例就足够了,非常感激.
我在SO上发现了其他一些相关问题,但它们似乎没有回答我的具体问题或过时：

Angular 2 “slide in animation” of a routed component
Page transition animations with Angular 2.0 router and component interface promises

这是我到目前为止：

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()
    {

    }
}

解决方法

你确定你没有参考答案：
https://stackoverflow.com/a/40077108/6678754
与plunker： https://embed.plnkr.co/Vral6cwlaQz27MUQNkVg/？
这应该适合你,再次检查.

您还有另一种选择：在导入about组件的父级中使用动画,如下所示：

<blog-about [@heroState]="activeRouteVar"></blog-about>