2016-06-17 54 views
5

Angular 2 RC2 è appena uscito e mi chiedo se supporta già animazioni sfalsate per *ngFor? La documentazione del linguaggio DSL menziona group e sequence ma non barcolla di alcun tipo?Angular 2 Staggering Animation

L'animazione sfalsata non è inclusa in RC2?

+0

un'occhiata a [QUESTO] (http://stackoverflow.com/a/40858203/5612697) –

risposta

0

Stanno lavorando su di esso, come si può vedere qui: https://www.youtube.com/watch?v=Hr4IKlr9mhg&feature=youtu.be&t=10m50s

Ma penso che non è stato rilasciato ancora ... Dobbiamo aspettare un po 'di più :-(

Qui c'è gli esempi che vediamo nel video ... ma non so se questa è una versione stabile ... a vostro rischio e pericolo https://github.com/matsko/ng-conf-demos

+0

Il modulo di animazione dimostrata a ng-conf è incluso nel Angular2 RC.3 –

+0

scusa per la spinta. Ma qualche aggiornamento su questo? È scaglionato (ng-conf-demos) ancora valido? Se no, c'è un plunker disponibile? – kkern

5

Non sono sicuro che sono d'accordo con Günter che il ng- le caratteristiche di conf sono nel nuovissimo RC.3 o, per quella materia, nella versione RC.4. Una funzione scaglionata sarebbe excelle nt ma a partire da quella corrente non sembra che sia previsto per RC.5. Sarà sicuramente nella versione Angular 2 Final come puoi vedere su questo monitoraggio delle animazioni ticket. Detto questo, ho creato una soluzione alternativa per la mia applicazione che sarei disposto a condividere. Ci potrebbe essere un approccio più facile, ma questo funziona:

@Component({ 
    selector: 'child', 
    templateUrl: `<div @fadeIn="state">This is my content</div>`, 
    animations: [ 
     trigger('fadeIn', [ 
      state('inactive', style({opacity:0})), 
      state('active', style({opacity:1)})), 
      transition('inactive => active', [ 
       animate('500ms ease-in') 
      ]) 
     ]) 
    ] 
}) 
export class Child implements OnInit { 
    @Input() delay; 

    constructor() { 
     this.state = 'inactive'; 
    } 
    ngOnInit() { 
     this.sleep(this.delay).then(() => { 
      this.state = 'active'; 
     }; 
    } 
    // HELPER* 
    sleep(time) { 
     return new Promise((resolve) => setTimeout(resolve, time)); 
    } 
} 

@Component({ 
    selector: 'parent', 
    templateUrl: ` 
     <div *ngFor="let child of children"> 
      <child [delay]="child.delay"></child> 
     </div> 
    ` 
}) 
export class Child implements OnInit { 
    constructor() { 
     this.children = []; 
     this.children.push({ delay: 600 }); 
     this.children.push({ delay: 1200 }); 
    } 
} 

Come se non detto che forse il modo più semplice, ma funziona per me. Spero che ti aiuti!

* ASSISTENTE: What is the JavaScript version of sleep()?