如何使用Angular2和Reactive來收聽css動畫的結束

我想在Angular2應用程序中手動執行頁面轉換。所以到目前爲止，我所做的是製作一個服務，我從一個處理導航的組件調用。當你點擊一些鏈接，或圖標或任何我稱之爲AnimationService goTo方法。這會接收一個URL並將其推送到Observable流/主題。這是迄今爲止服務：如何使用Angular2和Reactive來收聽css動畫的結束

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

}

，我希望動畫內容有一個ngClass條件在它的HTML模板，像這樣[ngClass]="{'animate-left': applyTransitionClass}"，它看起來像這樣

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

，並在它的分量I有以下代碼

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

您可以看到我在哪裏訂閱Observable以及如何更改觸發css動畫的值。現在在組件中，我希望監聽剛剛觸發的css類的結束，然後讓AnimationService知道這是通過推送到animationStreamEnd發生的。但是我不知道如何獲得動畫結束事件（如"transitionend","oTransitionEnd","transitionend","webkitTransitionEnd"）。我知道我可以設置1秒的延遲，但我希望使用Observables。

我知道我沒有很好地解釋我自己，我會修改這個問題，如果我需要澄清的要求。提前致謝。

來源

2016-07-14 Mark Sandman

這是我正在做它：

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

來源

2016-09-27 11:19:13 VRPF

的Angular2動畫模塊得到了之前2.0.0最終實現回調。

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> 
`,

來源

2016-09-27 11:21:29

的問題是，因爲你不能參數Angular2動畫（但），你不能使用它們所有轉換。 –

組件的視圖：

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

分量碼：

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

來源

2017-01-24 17:19:46

如何使用Angular2和Reactive來收聽css動畫的結束

回答

相關問題