Angular 4 Routing Change Animation

Question

J'essaye de faire une simple animation de fondu lors du changement de route, mais cela ne fonctionne pas.

Mon fichier d'animation, il est comme ça:

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') 
      ]) 
     ]); 
    }; 
}; 

Mon élément est comme ça:

@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() { 
    } 
} 

J'observé que si je mets un position: fixed sur les états, cela fonctionne, mais lorsque l'animation est terminée la vue est fixe et la disposition est brisée dans l'application.

Answer 1

Ajouter position: 'relative' sur 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})) ]) 
    ]); 
} 

dans votre composant

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

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

}