Angular 4路由更改動畫

Question

我試圖在路由更改上做簡單的淡入淡出動畫，但它不起作用。

我的動畫文件是這樣的：

export class RouterAnimations { 
    static animate() { 
     return trigger('routerTransition', [ 
      state('void', style({ opacity: 0 })), 
      state('*', style({ opacity: 1 })), 
      transition(':enter', [ 
       style({ opacity: 0 }), 
       animate('0.4s ease') 
      ]), 
      transition(':leave', [ 
       style({ opacity: 1 }), 
       animate('0.4s ease') 
      ]) 
     ]); 
    }; 
}; 

我的組件是這樣的：

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['../vitrine.component.css', './home.component.css'], 
    animations: [RouterAnimations.animate()] 
}) 
export class HomeComponent implements OnInit { 
    @HostBinding('@routerTransition') 
    public routerTransition = true; 

    constructor() { } 

    ngOnInit() { 
    } 
} 

我發現，如果我把狀態的position: fixed，它的工作原理，但是當動畫完成該視圖已修復，並且應用程序中的佈局被破壞。

Answer 1

上state('*',style({position: 'relative', opacity: 0 }))

import {trigger, state, animate, style, transition} from '@angular/animations'; 

export function fade() { 
    return trigger('routerTransition', [ 
     state('void', style({position: 'fixed', opacity: 0 })), 
     state('*', style({position: 'relative', opacity: 0 })), 
     transition(':enter', [ style({opacity: 0}), animate('0.4s ease', style({opacity: 1})) ]), 
     transition(':leave', [ style({opacity: 1}), animate('0.4s ease', style({opacity: 0})) ]) 
    ]); 
} 

在組件

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['../vitrine.component.css', './home.component.css'], 
    animations: [fade()] 
}) 
export class HomeComponent { 

    @HostBinding('@routerTransition') routerTransition; 
    // ... 

}