Estoy tratando de que cuando el usuario cambie de pestaña, se deslice entre ellas.

Estoy usando animate.css y la versión 4 de Angular2.

Detecto el cambio de enrutador y agrego la animación así:

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

donde #home y #about son los componentes a los que se enrutan. Esos dos identificadores se colocan para cubrir HomeComponent y AboutComponent.

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

La animación funciona cuando se usa algo que no está en <router-outlet> (por ejemplo, cuando se usa $("body") ), así que supongo que debo hacer algo diferente con los componentes del enrutador.