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; 
    // ... 

}