Angular2 ve Reaktif

Question

ile bir css animaton'un sonunu nasıl dinlerim Angular2 uygulamasında sayfa geçişlerini manuel olarak gerçekleştirmek istiyorum. Yani şu ana kadar yaptığım şey, navigasyonla uğraşan bir Bileşenden aradığım bir hizmet üretiyor. Bir bağlantıya veya simgeye tıkladığınızda veya AnimationService goTo yöntemini kullandığımda. Bu bir URL alır ve Gözlemlenebilir bir akıma/konuya iter. İşte şimdiye kadar hizmettir:

@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); 
    } 

} 

ben animasyon isteyen içerik içinde bir ngClass durum bu

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

gibi görünür ve içinde, yani [ngClass]="{'animate-left': applyTransitionClass}" gibi HTML şablonu var bileşen I var sahiptir Ben gözlemlenebilir ve nasıl css animasyon tetikler değerini değiştirmek abone nerede görebilirsiniz aşağıdaki kodu

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); 
     }); 
    } 

var. Şimdi Bileşen içinde yeni tetiklediğim css sınıfının sonunu dinlemek istiyorum, sonra AnimationService'nin bunun animStreamEnd'e iterek olduğunu bilmesini sağlayın. Ancak animasyon son olayını nasıl tutacağımı bilmiyorum ("transitionend","oTransitionEnd","transitionend","webkitTransitionEnd" gibi). 1 saniyelik bir gecikme ayarlayabileceğimi biliyorum ama bunun Gözlemcileri kullanmasını istiyorum.

Kendimi iyi açıklamadığımı biliyorum, bu sorunu açıklığa kavuşturmalıyım. Şimdiden teşekkürler.

Answer 1

Bu Yapıyorum nasıl:

 //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

Angular2 animasyon modülü sadece 2.0.0 final maçından önce uygulanan geri aramalar var.

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

bileşen görünüm:

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

bileşen kodu:

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