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.