如何在加載/卸載時在頁面上實現淡入/淡出效果？

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>