angular - 如何在我的页面加载/卸载时实现淡入/淡出效果？

Question

我想我已经连接了基本的动画部分，我只需要知道要处理什么事件。理想情况下，我想要一个可以在导航级别使用的解决方案，这样我就可以包装我的所有组件，但是一个简单的页面加载示例就足够了，我们将不胜感激。 我在 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()
    {

    }
}

Answer 1

你确定你没有引用答案: https://stackoverflow.com/a/40077108/6678754 与 plunker:https://embed.plnkr.co/Vral6cwlaQz27MUQNkVg/ ？ 这应该对您有用，请再次检查。

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

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