typescript – 如何用Angular2和Reactive侦听css动画的结尾

我想在我的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);
    }

}

我希望动画的内容在其HTML模板中有一个ngClass条件,如[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.

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

组件的视图：

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

分量码：

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

原文地址：https://www.jb51.cc/angularjs/142208.html