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

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/？ 这应该适合你，请再次检查。

你有另一种选择，但：使用动画在您导入有关组件，像这样的家长：

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