如何用Angular2和Reactive听一下css动画师的结尾

Question

我想在我的Angular2应用程序中手动执行页面转换.所以我到目前为止所做的是产生了一个服务,我从一个处理导航的组件调用.当您单击某个链接,图标或我称之为AnimationService goTo方法的任何内容时.这将接收一个URL并推送到Observable流/主题.这是迄今为止的服务:

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

在它的组件中我有以下代码

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动画的值.现在在Component中我希望监听我刚刚触发的css类的结束然后让AnimationService知道这已经发生了,因为推送到animationStreamEnd.但是我不知道如何抓住动画结束事件(比如"transitionend","oTransitionEnd","transitionend","webkitTransitionEnd").我知道我可以设置1秒延迟,但我希望这可以使用Observables.

我知道我没有很好地解释自己,如果需要澄清要求,我会修改问题.提前致谢.

Answer 1

组件的视图:

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

分量码:

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

Answer 2

我就是这样做的：

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