Angolare 2 "slide in animation" di un componente instradato

Question

diciamo che ho 2 componenti di routing e due router nella barra di navigazione fissa per il loro instradamento. Voglio che facciano scorrere da destra quando clicco su Routerlink.

Non voglio compensare il componente con css e utilizzare una funzione di timeout per modificare la classe css in modo che possa scorrere (ad esempio con ngStyle o ngClass).

ci sono modi più eleganti per ottenerlo in Angular 2?

Grazie!

Answer 1

Con angolare 4.1 è ora possibile creare animazioni di percorso specifici. Questo è diverso dall'attivazione di un'animazione quando viene visualizzato un componente perché consente di animare il componente in entrata/in uscita allo stesso tempo per una transizione fluida e consente di modificare la transizione a seconda del componente in arrivo o in partenza. Ciò significa che puoi eseguire transizioni complesse come far scorrere un componente da destra se esegui il drill down nel contenuto e farlo scorrere da sinistra se lo inserisci tramite un pulsante "indietro" di un altro componente.

1. Innanzitutto, annotare il router presa in questo modo (per es app.component.html.):

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

2. implementare la funzione prepareRouteTransition(outlet) nella definizione del componente corrispondente (ad esempio app.component.js).

   prepareRouteTransition(outlet) { 
       const animation = outlet.activatedRouteData['animation'] || {}; 
       return animation['value'] || null; 
   } 
   

3. Definire le animazioni (ad es app.component.js):

   const slideLeft = [ 
       query(':leave', style({ position: 'absolute', left: 0, right: 0 ,transform: 'translate3d(0%,0,0)' }), {optional:true}), 
       query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(-100%,0,0)' }), {optional:true}), 
       group([ 
        query(':leave', group([ 
        animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(100%,0,0)' })), // y: '-100%' 
        ]), {optional:true}), 
        query(':enter', group([ 
        animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(0%,0,0)' })), 
        ]), {optional:true}) 
       ]) 
       ] 
   
       const slideRight = [ 
       query(':leave', style({ position: 'absolute', left: 0, right: 0 , transform: 'translate3d(0%,0,0)'}), {optional:true}), 
       query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(100%,0,0)'}), {optional:true}), 
   
       group([ 
        query(':leave', group([ 
        animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(-100%,0,0)' })), // y: '-100%' 
        ]), {optional:true}), 
        query(':enter', group([ 
        animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(0%,0,0)' })), 
        ]), {optional:true}) 
       ]) 
       ] 
   

4. Aggiungere i metadati animazioni alle definizioni di percorso (ad esempio app.routing.ts):

   const routes: Routes = [ 
       { 
       path: 'products', 
       component: ProductsComponent, 
       data: { 
        animation: { 
        value: 'products', 
        } 
       } 
       }, 
       { 
       path: 'products/:id', 
       component: ProductDetailComponent, 
       data: { 
        animation: { 
        value: 'product-detail', 
        } 
       } 
       } 
   

5. Infine, registrare un ' L'animazione di routerAnimations si attiva sul componente con le animazioni e i metadati di percorso definiti (ad esapp.component.js):

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

Non dimenticate di Polyfill l'API Animation Web di indirizzare i vecchi browser

Matias Niemela parla di più su animazioni percorso a ng-conf qui (con un demo): https://youtu.be/Oh9wj-1p2BM?t=12m21s

Il suo codice di presentazione: https://github.com/matsko/ng4-animations-preview

Answer 2

In termini di scorrevolezza è piuttosto semplice.

È possibile fare riferimento a Official Angular 2 Animate docs.

È inoltre possibile controllare questo Plunker ho fatto per una semplice vetrina, utilizzando il nuovo router v3

Tenete a mente che Ho difficoltà a capire come hanno effettivamente le ferie/uscita/transizioni vuote quando i l'elemento innescato sta per essere distrutto dalla vista.

Ho aperto un altro thread in Angular 2 Animate - No visible effect of the '* => void' transition when changing routes/components per cercare di capire come fare in modo che il router prenda nota dell'animazione in uscita/tempo di transizione.

@Component({ 
    selector: 'home', 
    directives: [ROUTER_DIRECTIVES], 
    template: ` 
    <div @flyInOut="'active'" class="radibre"> 
    </div> 
    `, 
    styles: ['.radibre { width: 200px; height: 100px; background: red; }'], 
    animations: [ 
    trigger('flyInOut', [ 
     state('in', style({transform: 'translateX(0)'})), 
     transition('void => *', [ 
     style({transform: 'translateX(-100%)'}), 
     animate(100) 
     ]), 
     transition('* => void', [ 
     animate(100, style({transform: 'translateX(100%)'})) 
     ]) 
    ]) 
    ] 
}) 

export class Home { 
    constructor() { } 
} 

@Component({ 
    selector: 'page', 
    template: ` 
    <div @testingBottom="'active'" class="page"></div>`, 
    styles: ['.page { width: 300px; height: 50px; background: green; }'], 
    animations: [ 
    trigger('testingBottom', [ 
     state('active', style({transform: 'scale(1)'})), 
     transition('void => *', [ 
     style({transform: 'scale(0)'}), 
     animate(100) 
     ]), 
     transition('* => void', [ 
     animate(100, style({transform: 'scale(0)'})) 
     ]) 
    ]) 
    ] 
})