Route animation angular 4

Question

L'application sur laquelle je travaille nécessite la possibilité de naviguer dans les deux sens, de sorte que lorsque vous naviguez dans l'application dans un sens, les composants s'animent de gauche à droite, et quand vous revenez, ils naviguer de droite à gauche.

à savoir

component1 -> component2 = left -> right animation 
component2 -> component1 = right -> left animation 

je peux réaliser ce assez facilement dans NG4 mais le problème est qu'il ne naviguait pas à la fois la sortie et entrant dans les composants. Le composant sortant disparaît juste et le composant entrant s'anime.

Je peux aussi le faire dans NG2 - mais la complication survient quand vous avez une animation conditionnelle. c'est à dire.

component2 -> component3 = left -> right animation 
component2 -> component1 = right -> left animation 

Le problème ici est de déclencher une animation différente en fonction de l'itinéraire suivant ou précédent.

Est-ce que quelqu'un a une solution dans NG2 ou 4 pour résoudre le problème de l'animation des deux vues simultanément dans les deux sens?

Je n'ai pas mis ceci dans plunkr parce que je n'ai aucune idée comment installer une application NG4 dans cela. Excuses.

solution Mon NG4 est basée sur this demo apphttps://github.com/matsko/ng4-animations-preview

mais essentiellement dans mes app.component.ts je l'animation suivante:

animations: [ 
    trigger('routerAnimations',[ 
     transition('page1 => page2',[ 
      style({transform: 'translateX(100%)'}), 
      animate('500ms') 
     ]), 
     transition('page2 => page1', [ 
      style({transform: 'translateX(-100%)'}), 
      animate('500ms') 
     ]), 
     transition('page2 => page3',[ 
      style({transform: 'translateX(100%)'}), 
      animate('500ms') 
     ]), 
     transition('page3 => page2',[ 
      style({transform: 'translateX(-100%)'}), 
      animate('500ms') 
     ]), 
     transition('page3 => page4',[ 
      style({transform: 'translateX(100%)'}), 
      animate('500ms') 
     ]), 
     transition('page4 => page3',[ 
      style({transform: 'translateX(-100%)'}), 
      animate('500ms') 
     ]) 
    ]) 
] 

et une fonction qui prend une valeur d'animation de chaque itinéraire et se lie à la variable de sortie de la <router-outlet> in app.component.html (?):

export class AppComponent { 
    prepareRouteTransition(outlet) { 
     let routeData: any; 
     try { 
      routeData = outlet['_activatedRoute'].snapshot.routeConfig['animation']; 
     } catch(e) { 
      return ''; 
     } 
     return routeData.value; 
    } 
} 

Fonction saisit au-dessus de la valeur d'animation qui est utilisé dans l'animation pour définir le début et la transition des valeurs extrêmes:

export const APP_ROUTES = [{ 
    path: '', 
    component: Page1Component, 
    animation: { 
     value: 'page1', 
    } 
    }, 
    { 
    path: 'page2', 
    component: Page2Component, 
    animation: { 
     value: 'page2', 
    } 
    }, 
    { 
    path: 'page3', 
    component: Page3Component, 
    animation: { 
     value: 'page3' 
    } 
    }, 
    { 
     path: 'page4', 
     component: Page4Component, 
     animation: { 
      value: 'page4' 
     } 
    } 
]; 

app.component.html:

<div class="page" [@routerAnimations]="prepareRouteTransition(outlet)"> 
    <router-outlet #outlet="outlet"></router-outlet> 
</div> 

Answer 1

Vous pouvez y parvenir maintenant en définissant des animations qui interrogent des éléments :enter et :leave .

Cet exemple animer l'itinéraire sortir et animer dans la voie d'entrer en douceur:

const slideLeft = [ 
    query(':leave', style({ position: 'absolute', left: 0, right: 0 ,transform: 'translate3d(0%,0,0)' })), 
    query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(-100%,0,0)' })), 
    group([ 
    query(':leave', 
     animate('1s', style({ transform: 'translate3d(100%,0,0)' }))), 
    query(':enter', 
     animate('1s', style({ transform: 'translate3d(0%,0,0)' }))) 
    ]) 
] 

const slideRight = [ 
    query(':leave', style({ position: 'absolute', left: 0, right: 0 , transform: 'translate3d(0%,0,0)'})), 
    query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(100%,0,0)'})), 

    group([ 
    query(':leave', 
     animate('1s', style({ transform: 'translate3d(-100%,0,0)' }))), 
    query(':enter', 
     animate('1s', style({ transform: 'translate3d(0%,0,0)' }))) 
    ]) 
] 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    animations: [ 
    trigger('routerAnimations', [ 
     transition('products => product-details', slideRight), 
     transition('product-details => products', slideLeft) 
    ]) 
    ] 
})