I am trying to get it so when the user switches tabs, it will slide between them.

I am using animate.css and version 4 of Angular2.

I detect the router change and add the animation like this:

    this.router.events.pairwise().filter((e) => e[0] instanceof NavigationEnd && e[1] instanceof NavigationStart).subscribe((e: [NavigationStart, NavigationEnd]) => {
            $("#home").addClass("animated slideOutRight").one("animationend", function() {
                $(this).removeClass("animated slideOutRight");
            })
            $("#about").addClass("animated slideInLeft").one("animationend", function() {
                $(this).removeClass("animated slideInLeft");
            })
    });

where #home and #about are the components being routed to. Those two ids are placed to cover HomeComponent and AboutComponent.

  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'about',
    component: AboutComponent
  },

The animation works when using something that isn't in the <router-outlet> (eg when using $("body")) so I'm guessing I need to do something differently about the router components.