Come ascoltare la fine di un'animazione css con Angular2 e Reactive

Question

Desidero eseguire manualmente le transizioni di pagina nella mia app Angular2. Quindi quello che ho fatto finora è prodotto da un servizio che chiamo da una Componente che si occupa della navigazione. Quando fai clic su qualche link, o icona o qualsiasi altra cosa chiamo il metodo AnimationService goTo. Questo riceve un URL e passa a uno stream/soggetto osservabile. Ecco il servizio finora:

@Injectable() 
export class AnimationService { 
    // should you be a directive? 
    animationStream: Subject<string> = new Subject<string>(); 
    animationStreamEnd:Subject<string> = new Subject<string>() 

    constructor() { 

     // this is to listen for when it is time to navigate to whereever? 
     this.animationStreamEnd.subscribe(resp => { 
      // redirect the url/app here 
      this.router.go(resp); 
     }); 

    } 

    goTo(url:string): void { 
     // so, broadcast down to trigger the css animation... 
     this.animationStream.next(url); 
    } 

} 

i contenuti che desidero per animare ha una condizione ngClass nel suo modello HTML in questo modo [ngClass]="{'animate-left': applyTransitionClass}", sembra qualcosa di simile

<div class="gridClass" [ngClass]="{'animate-left': applyTransitionClass}"> 
    <div class="gridRow"> 
     <route-view></route-view> 
     </div> 
    </div> 
</div> 

e nella sua componente I hanno il seguente codice

export class AnotherComponent { 

    constructor(private animationService: AnimationService) { 
      public applyTransitionClass: boolean = false; 

     this.animationService.animationStream.subscribe(resp => { 
      // resp is a url... 
      // apply a css class... when that is done we need to broadcast the thing is done... 
      this.applyTransitionClass = true; 
      // here I want to listen for when the animation end (it is only 1 second) and tell the animationService to now navigate to wherever 
      this.animationService.animationStreamEnd.next(resp); 
     }); 
    } 

Si può vedere dove mi iscrivo al Observable e come posso cambiare il valore che attiva l'animazione CSS. Ora all'interno del Component desidero ascoltare la fine della classe css che ho appena attivato e lasciare che AnimationService sappia che questo è successo spingendo all'animazioneStreamEnd. Tuttavia, non so come ottenere l'evento di fine animazione (come "transitionend","oTransitionEnd","transitionend","webkitTransitionEnd"). So che potrei semplicemente impostare un ritardo di 1 secondo, ma voglio che questo usi Observables.

So che non mi sono spiegato bene, correggerò la domanda se dovessi chiarire il requisito. Grazie in anticipo.

Answer 1

Questo è come io sto facendo:

 //this.isIn = false; 
    this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'addEventListener', ['animationend', (e) => { 
     console.log(e); 
    }]); 
    this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'addEventListener', ['transitionend', (e) => { 
     console.log(e); 
    }]); 

Answer 2

Il modulo di animazione Angular2 ottenuto callback attuate poco prima 2.0.0 finale.

https://angular.io/docs/ts/latest/guide/animations.html#!#animation-callbacks

template: ` 
    <ul> 
    <li *ngFor="let hero of heroes" 
     (@flyInOut.start)="animationStarted($event)" 
     (@flyInOut.done)="animationDone($event)" 
     [@flyInOut]="'in'"> 
     {{hero.name}} 
    </li> 
    </ul> 
`, 

Answer 3

componente-view:

<div (transitionend)="transitionEnd($event)"> 
    ... 
</div> 

componente-code:

transitionEnd(e: Event){ 
    alert('no way, that easy?'); 
    }