How to listen for the end of a css animaton with Angular2 and Reactive
<p>I want to manually perform page transitions in my Angular2 app. So what I have done so far is produced a service that I call from a Component that deals with navigation. When you click on some link, or icon or whatever I call the AnimationService <code>goTo</code> method. This receives a URL and pushes to an Observable stream / subject. Here is the service so far:</p>

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

    constructor() {

        // this is to listen for when it is time to navigate to whereever? 
        this.animationStreamEnd.subscribe(resp =&gt; {
            // 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);
    }

}
</code></pre>

<p>the content that I wish to animate has a <code>ngClass</code> condition in it's HTML template like so <code>[ngClass]="{'animate-left': applyTransitionClass}"</code>, it looks something like this</p>

<pre><code>&lt;div class="gridClass" [ngClass]="{'animate-left': applyTransitionClass}"&gt;
    &lt;div class="gridRow"&gt;
        &lt;route-view&gt;&lt;/route-view&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and in it's component I have the following code</p>

<pre><code>export class AnotherComponent {

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

        this.animationService.animationStream.subscribe(resp =&gt; {
            // 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);
        });
    }
</code></pre>

<p>You can see where I subscribe to the Observable and how I change the value that triggers the css animation. Now within the Component I wish to listen for the end of the css class I have just triggered then let the AnimationService know this has happened by pushing to the animationStreamEnd. However I don't know how to get hold of the animation end event (like <code>"transitionend","oTransitionEnd","transitionend","webkitTransitionEnd"</code>). I know I could just set a 1 second delay but I want this to use Observables.</p>

<p>I know I haven't explained myself well, I will amend the question should I need to clarify the requirement. Thanks in advance.</p>