angulaire 4 Animation ne se déclenche pas sur le changement d'itinéraire

Question

J'ai créé l'animation suivante dans mon projet angulaire 4:

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

export function slide() { 
    return trigger('slide', [ 
      transition('void => *', [ 
       style({opacity: 0}), 
       style({transform: 'translateX(100%)'}), 
       animate('1s ease-in-out', style({transform: 'translateX(0%)', opacity: 1})) 
      ]), 
      transition('* => void', [ 
       style({opacity: 0}), 
       style({transform: 'translateX(100%)'}), 
       animate('1s 2s ease-in-out', style({transform: 'translateX(0%)', opacity: 1})) 
      ]) 
     ]) 
    } 

J'ai joint l'animation à mon composant en utilisant la propriété host du décorateur @Component .

@Component({ 
    selector: 'test', 
    templateUrl: './test.component.html', 
    styleUrls: ['./test.component.scss'], 
    animations: [slide()], 
    host: {'[@slide]': '', 'style': 'display: block;'} 
}) 

Maintenant, je pense que l'animation se déclencher à deux points: 1. Lorsque le composant est initialisé, alias quand je frappe la route appropriée 2. Quand je quitte cette route et de naviguer entre eux

Le premier scénario fonctionne parfaitement, mais pas le second. Qu'est-ce que je manque/fais mal ici?

Answer 1

J'ai réussi à obtenir quelque chose de similaire à votre animation après quelques essais et erreurs.

export function slideLeft() { 
    return slide(); 
} 

function slide() { 
    return trigger('slide', [ 
     state('void', style({position:'absolute', width:'100%'})), 
     state('*', style({position:'absolute', width:'100%'})), 
     transition('void => *', [ 
      style({transform: 'translateX(100%)', opacity: 0 }), 
      animate('1s ease-in-out', style({transform: 'translateX(0%)', opacity: 1 })) 
     ]), 
     transition('* => void', [ 
      style({transform: 'translateX(0%)', opacity: 1 }), 
      animate('1s ease-in-out', style({transform: 'translateX(-100%)', opacity: 0 })) 
     ]) 
    ]); 
} 

Ceci est mon code d'animation.

@Component({ 
    selector: 'app-away', 
    templateUrl: './away.component.html', 
    styleUrls: ['./away.component.css'], 
    animations: [ slideLeft() ], 
    host: { '[@slide]': '' } 
}) 

Voici comment je l'ai appliqué au composant.

Pour l'animation de départ, vous avez utilisé exactement les mêmes propriétés pour l'animation d'entrée. Ce que vous voulez, c'est que le composant que vous animez passe de 0% à -100% à la sortie.

J'ai aussi ajouté quelques fonctions d'aide, état qui appliquent un style de position: absolute prendre votre composant hors du flux normal de la page.

Espérons que cela aide.